html css网页制作案例（HTML+CSS实现网页布局）

本文目录

• HTML+CSS实现网页布局
• 怎样用HTML和CSS做网页
• html+css简单网页代码，五张网页左右
• 急求一个网页制作，用HTML和CSS制作的就可以！急求急求！
• 请大家帮我用HTML+CSS+DIV做一个简单的网页,我是CSS初学者,只是想以次作为例子参考,但也要内容啊,谢谢!
• html 求大神用css外部样式做这样的一个网页
• html+css怎么做网页

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实现对网页的整体布局，然后嵌套CSS对页面进行字体、颜色、等属性设置。完成网页的最终样式。

html+css简单网页代码，五张网页左右

多简单 ？
《style type="text/css"》
p{
color:#ccc;
font-size:20px;
}
《/style》
《p》你好《/p》
2：
《style type="text/css"》
*{
padding: 0;
margin: 0;
}
div{
background: #2B4D71;
color: #3aa21b;
position: absolute;
top: 300px;
left: 100px;
width: 300px;
height: 300px;
}
《/style》
《div》第二个《/div》
3：
《style type="text/css"》
*{
padding: 0;
margin: 0;
}
#divs{
background: #2B4D71;
color: #3aa21b;
}
《/style》
《div id="divs"》
《h3 onclick="Clicks()"》点我《/h3》
《/div》
《script》
function Clicks(){
alert("被点击了(点击事件)");
document.getElementById("divs").style="#0ff";
}
《/script》
/**
*剩下那俩你自己随便改改就ok了
*/

急求一个网页制作，用HTML和CSS制作的就可以！急求急求！

直接百度这些类别！ 多翻几页！ 进去一个网站！ ctrl+s 保存类型 网页全部！ 自己稍微处理下痕迹就可以了！ 然后再多找几个页面同样保存！还可以顺带自己学下网页制作！

请大家帮我用HTML+CSS+DIV做一个简单的网页,我是CSS初学者,只是想以次作为例子参考,但也要内容啊,谢谢!

《html》
《style》
p{margin:5px}
table{background:#555}
《/style》
《body》
《p》test1《/p》
《p》test2《/p》
《a href="http://baidu.com"》baidu《/a》
《img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" ?
《table》《tr》《td》test《/td》《td》test《td/》《/tr》
《tr》《td》test《/td》《td》test《td/》《/tr》
《tr》《td》test《/td》《td》test《td/》《/tr》《/table》
《/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，然后用浏览器打开，一个简单的网页就出现了。