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

本文目录

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

使用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》

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外部样式做这样的一个网页

布局.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》
《head》
《style》
p {
background-color: lightblue;
}
《/style》
《/head》
《body》
《h1》Hello World!《/h1》
《p》p标签拥有浅蓝色背景色！《/p》
《/body》
《/html》
然后保存文件，将后缀名修改为.HTML，然后用浏览器打开，一个简单的网页就出现了。