码迷,mamicode.com
首页 > Web开发 > 详细

HTML/CSS学习1

时间:2018-10-22 00:08:05      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:学习   100%   nav   ade   ack   flow   页脚   strong   专题   

为什么学习前端:

1.我想做一个个人的网站,所以除了懂得服务器的知识之外,还要懂得前端代码。这样才可以做出自己喜欢的网页。

2.其实也不是完全为了做网页而做。余生很长也很短,很长是一辈子,很短只有几十年。在这短短的几十年里如果不能够实现一个或者两个自己梦想的事情,那么这个人生是多么的没有意义啊。

3.余生与梦想和生活相伴。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------一 .HTML和CSS的关系

HTML主要是内容,而CSS是控制这些内容的表现形式。CSS可以用多种样式,对于不同的网页,利用不同的样式来呈现不同的页面主题。

HTML代码如下:

<head>
    <title>Grid Layout</title>
    <link rel=‘stylesheet‘ type=‘text/css‘ href=‘CSS/流体布局css.css‘ />
    <style> See the right hand page </style>
</head>
<body>
    <div id=‘header‘>
        <h1>Logo</h1>
        <div id=‘nav‘>
            <ul>
                <li><a href=‘‘>Home</a></li>
                <li><a href=‘‘>Products</a></li>
                <li><a href=‘‘>Services</a></li>
                <li><a href=‘‘>About</a></li>
                <li><a href=‘‘>Contact</a></li>
            </ul>
        </div>
    </div>
    <div id=‘content‘>
            <div id=‘feature‘ class=‘grid_12‘>
            <p>Feature</p>
        </div>
        <div class=‘article column1‘>
            <p>Column One</p>
        </div>
        <div class=‘article column2‘>
            <p>Column two</p>
        </div>
        <div class=‘article column3‘>
            <p>Column three</p>
        </div>
        <div id=‘footer‘ class=‘grid_12‘>
            <p>&copy:Copyright 2011</p>
        </div>
    </body>

CSS代码如下:

流体布局代码:
body {
        width: 90%;
margin: 0 auto;}
#content {
    overflow: auto;
height:100%;}
#nav, #feature, #footer {
margin:1%;}
.column1,.column2,.column3{
        width:31.3%;
        float:left;
        margin:1%;}
.column3 {margin-right: 0%};
li {
    display:inline;
padding:0.5em;}
#nav,#footer {
    background-color:#efefef;
    padding:0.5em 0;
    }    
#feature,.article {
        height:10em;
        margin-bottom:1em;
background-color:#efefef;}

 固定布局代码:
body {
        width: 960px;
margin: 0 auto;}
#content {
    overflow: auto;
height:100%;}
#nav,#feature,#footer {
        background-color: #efefef;
        padding:10px;
        overflow:auto;
margin:10px;}
.column1,.column2,.column3{
        background-color:#efefef;
        width:300px;
float:left;margin:10px;}
li {
    display:inline;
padding:5px;}    
    

上述的代码存在问题,暂时无法解决,待后续~~~

ps:标题不能居中显示,专题也不能居中,和页脚都不能居中显示。

 

HTML/CSS学习1

标签:学习   100%   nav   ade   ack   flow   页脚   strong   专题   

原文地址:https://www.cnblogs.com/zxdkj/p/9827602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!