html css网页制作案例（怎样用HTML和CSS做网页）

本文目录

• 怎样用HTML和CSS做网页
• html 求大神用css外部样式做这样的一个网页
• HTML+CSS实现网页布局
• 使用html+css完成网页效果图中所示的logo、banner、Menu顶部区域网页内容区域以及底部区域选做

怎样用HTML和CSS做网页

HTML实现对网页的整体布局，然后嵌套CSS对页面进行字体、颜色、等属性设置。完成网页的最终样式。

html 求大神用css外部样式做这样的一个网页

布局.html  文件代码清单如下：

《!doctype html》
《html lang="zh"》
    《head》
        《meta charset="utf-8" /》
        《title》布局《/title》
        《link rel="stylesheet" href="layout.css" /》
    《/head》
    《body》
        《div id="article"》
            《div id="aside"》
                《div id="nav"》
                  《ul》
                    《li》《a href="#"》首页《/a》《/li》
                    《li》《a href="#"》精华区《/a》《/li》
                    《li》《a href="#"》收藏夹《/a》《/li》
                    《li》《a href="#"》分区讨论《/a》《/li》
                    《li》《a href="#"》邮箱《/a》《/li》
                  《/ul》
                《/div》
                《div id="recommend"》
                  《ul》
                    《span》经典推荐《/span》
                    《li》《a href="#"》一般类别《/a》《/li》
                    《li》《a href="#"》从明天起《/a》《/li》
                    《li》《a href="#"》纸飞机《/a》《/li》
                    《li》《a href="#"》下一站《/a》《/li》
                  《/ul》
                《/div》
            《/div》
            《div id="content"》
                《h1》转播设备《/h1》
                《p》纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机《/p》
                《h1》旅程《/h1》
                《p》纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机纸飞机《/p》
            《/div》
            《div id="figure"》
                《p》《a href="#" title=""》《img src="1.jpg" alt="" /》《span》XXXXXX《/span》《/a》《/p》
                《p》《a href="#" title=""》《img src="2.jpg" alt="" /》《span》OOOOOO《/span》《/a》《/p》
                《p》《a href="#" title=""》《img src="3.jpg" alt="" /》《span》XXXXXX《/span》《/a》《/p》   
            《/div》         
        《/div》
        《div id="footer"》
            《p》版权所有 2222 西瓜你个香蕉《/p》
        《/div》
    《/body》
《/html》

layout.css  文件代码清单如下：

body, div,ul, li,
h1, h3, h3, h4, h5, h6,
p {
margin: 0;
padding: 0;
}
img {
border: 0;
}
h1, h3, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
html {
margin: 0 auto;
width: 960px;
background: #fff;
}
body {
margin: 0 5px;
width: 950px;
font-size: 0.875em;
_font-size: 12px;
line-height: 1.4375em;
background:  #f8e5ad;
}
a {
text-decoration: none;
color: #77a2c5;
}
a:hover {
text-decoration: underline;
}
div#article {
width: 950px;
height: 587px;
background: #b0dcff;
}
div#aside {
float: left;
padding-left: 50px;
width: 174px;
height: 587px;
}
div#content {
float: left;
padding: 0 10px;
width: 567px;
height: 587px;
color: #575757;
background: #e9fbff;
}
div#figure {
float: right;
width: 139px;
height: 587px;
background: #f8e5ad;
}
div#footer {
width: 950px;
background: #b1d1fa;
text-align: center;
}
div#aside a {
font-weight: bold;
}
div#nav ul, div#recommend ul {
margin-top: 2.875em;
list-style: none;
}
div#nav ul li, div#recommend ul li {
margin-bottom: 0.7187em;
}
div#recommend ul span {
display: block;
margin-bottom: 0.75em;
font-size: 1.4375em;
font-weight: bold;
line-height: 1em;
color: #224d6f;
}
div#content h1 {
margin-top: 2em;
margin-bottom: 1em;
font-size: 1.4375em;
_font-size: 23px;
font-weight: bold;
line-height: 1em;
color: #61b7d0;
}
div#content p {
margin-bottom: 1.4375em;
}
div#content p + p {
text-indent: 2em;
}
div#figure {
text-align: center;
}
div#figure p {
margin-top: 2.875em;
margin-bottom: -1.4375em;
_margin-bottom: 1em;
}
div#figure img, div#figure span {
margin: 0 auto;
_margin-bottom: 0.5em;
display: block;
}
div#figure span {
font-size: 0.75em;
_font-size: 12px;
color: #575757;
}
div#footer p {
font-size: 0.75em;
}

HTML+CSS实现网页布局

《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》Layout《/title》
《style》
body {margin: 0; padding: 0;}
.Header, .Footer {height: 100px; background-color: #369;}
.Left, .Right {
position: absolute;
top: 100px;
width: 100px;
height: 300px;
background-color: pink;
}
.Left {left: 0;}
.Right {right: 0;}
.Cont {margin: 0 100px;}
.con1, .con2 {height: 150px;}
.con1 {background-color: silver;}
.con2 {background-color: slateGrey;}
《/style》
《/head》
《body》
《div class="Header"》Header《/div》
《div class="Left"》Left《/div》
《div class="Cont"》
《div class="con1"》con1《/div》
《div class="con2"》con2《/div》
《/div》
《div class="Right"》Right《/div》
《div class="Footer"》Footer《/div》
《/body》
《/html》

使用html+css完成网页效果图中所示的logo、banner、Menu顶部区域网页内容区域以及底部区域选做

Step1. HTML代码
《div id="demo"》 《div class="col"》 《div class="big todos-thumb"》 《p》《img src="img/loader.gif" data-src="img/5969313944_e5d6d67b23_s.gif" alt="monaco see"》 《span class="todos-thumb-span"》monaco see《/span》 《/p》 《/div》 《/div》《!-- col1 --》 《div class="col col1"》 《div class="big todos-thumb"》 《p》《img src="img/loader.gif" data-src="img/5913489167_1e78858455_s.gif" alt="the flower"》 《span class="todos-thumb-span"》the flower《/span》 《/p》 《/div》 《/div》《!-- col2 --》 《div class="col col2"》 《div class="big todos-thumb"》 《p》《img src="img/loader.gif" data-src="img/5914033844_504a351fd4_m.gif" alt="Chapel Bridge"》 《span class="todos-thumb-span"》Chapel Bridge《/span》 《/p》 《/div》 《/div》《!-- col3 --》 《/div》《!-- demo --》
Step2. CSS样式
.col{ position: absolute; border-right:none; z-index:1; left:0; } .col1{ left: 51px; } .col2{ left: 102px; } .col3{ left: 153px; } .line { margin-top:51px; } .active { z-index: 10; opacity: 1; } .big:hover, .small:hover{ background:white; } .big{overflow: hidden; padding:1px;} .big p { width: 50px; height: 50px; line-height:1.3; z-index: 10; transition: all 0.2s ease-out; position: relative; cursor: pointer; } .big .icon-font{ float:left; } .big p img { width:50px; height:50px; float:left; } .lock-thumb .icon-font{ margin-left:25%; } .todos-thumb { background: rgb(255,255,255,0.1); } .todos-thumb:hover { background: #2FB1BE; color: #FFFFFF; box-shadow: 0 0 2px #333; } .col .todos-thumb { z-index:10; } .todos-thumb-span{ display: block; padding-left: 5em; } .todos-thumb p span{ width: 150px; padding-top: 5px; font-size: 1.2em; } .todos-thumb:hover p{ margin-right: 200px; }
Step3. 插入脚本
$(document).ready(function(){ $("#demo .col").mouseenter(function(){ $(this).addClass("active"); $(’.active’).siblings().css("opacity", "0.4"); //除了加载到.active样式以外都改变其opacity }); $("#demo .col").mouseleave(function(){ $(this).removeClass("active"); $("#demo .col").css("opacity", "1"); }); });
另外为了丰富相片墙的表现力，我添加了img load效果，用的是一款unveil的jQuery插件,使用方法为下:
《script type="text/javascript" src="js/jquery.unveil.min.js"》《/script》 《script》 $(function() { $("#demo img").unveil(300); //id为demo下的所有img图片 }); 《/script》