HTML/CSS学习1

最新推荐文章于 2023-10-03 15:55:56 发布

weixin_30478923

最新推荐文章于 2023-10-03 15:55:56 发布

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/zxdkj/p/9827602.html

版权

为什么学习前端：

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：标题不能居中显示，专题也不能居中，和页脚都不能居中显示。

转载于:https://www.cnblogs.com/zxdkj/p/9827602.html

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作

weixin_30478923

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS学习1

为什么学习前端：1.我想做一个个人的网站，所以除了懂得服务器的知识之外，还要懂得前端代码。这样才可以做出自己喜欢的网页。2.其实也不是完全为了做网页而做。余生很长也很短，很长是一辈子，很短只有几十年。在这短短的几十年里如果不能够实现一个或者两个自己梦想的事情，那么这个人生是多么的没有意义啊。3.余生与梦想和生活相伴。---------------------------------...
复制链接

扫一扫