本文目录
- 用html+div+css制作田字格网页布局
- 求用div+css做的网页代码、一个小的网页就行、别太高端的、发给我代码
- 设计一段html和css代码,其中至少包含三个div,分别展示三种css+引入方式
- 用div+css如何制作出这个网页效果
用html+div+css制作田字格网页布局
《!DOCTYPE html》《html》《head》《meta charset="utf-8"》《title》《/title》《style》.divL{float: left;background-color: yellow;width: 120px;height: 120px;}.divLT{margin: 50px;}.divLB{margin: 0px 50px 50px;}.divR{float: right;background-color: yellow;width: 120px;height: 120px;}.divRT{margin: 50px 50px 50px 0px}.divRB{margin: 0px 50px 50px 0px;}.divTB{background-color: #005580;border-color: #000000;width: 550px;height: 50px;}.divLR{width: 80px;height: 390px;background-color: #008000;display: table-cell;}《/style》《/head》《body》《div class="divTB"》《/div》《div style="display: table;width: 550px;"》《div class="divLR"》《/div》《div class="divL divLT"》《/div》《div class="divR divRT"》《/div》《div class="divL divLB"》《/div》《div class="divR divRB"》《/div》《div class="divLR"》《/div》《/div》《div class="divTB"》《/div》《/body》《/html》
写的可能不太行，不知道满不满足你的要求
求用div+css做的网页代码、一个小的网页就行、别太高端的、发给我代码
《!DOCTYPE HTML》《html》《head》《meta charset="utf-8"》《title》无标题文档《/title》《style》.item {float:left;width:250px;margin:10px;border:4px solid #CFD3D6;padding:4px;text-indent:1em;}.topic {text-align:left;background:#CCC;font-size:16px;font-weight:bold;color:#444444;line-height:35px;text-indent:2em;}.text {line-height:24px;text-align:left;text-indent:1em;font-size:12px;color:#444444;padding-left:1em;}.img {text-align:left;padding:4px;}.user {}#list1,#list2,#list3,#list4{float:left;}《/style》《/head》《body》《div style="width:284px;" id="list1"》 《div class="item"》 《div class="topic"》 瀑布流布局 《/div》 《div class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/div》 《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/div》 《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》 《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》所以说，中华文化博大精深。《/div》《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》《/div》《div style="width:284px;" id="list2"》 《div class="item"》 《div class="topic"》 TAG 《/div》 《div class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/div》 《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》晒晒单车吧！《/div》 《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》镜面风光！《/div》 《span class="text"》月落乌啼霜满天，江枫渔火对愁眠，姑苏城外寒山寺，进门得花钱！《/span》 《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》《/div》《div style="width:284px;" id="list3"》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》差一点就圆了《/div》 《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》据说若是你喜欢一个人，你会从ta的身上闻到一种特殊的味道，那是你们之间仅有的见证~《/div》 《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》《/div》《div style="width:284px;" id="list4"》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/div》 《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《span class="text"》敛身幽谷远尘埃，天光云影任徘徊。不须天风来相催，自在花儿静静开《/span》《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》 《div class="item"》 《div class="topic"》TAG《/div》 《div class="text"》美国当地时间5月8日，攀岩名将Daniel Woods在科罗拉多Clear Creek峡谷成功首攀一条新路线，难度疑似高达5.15a（9a+),成为科罗拉多州目前难度系数最高的路线。《/div》《div class="img"》《img src="images/face.png" width="115" height="116"》《/div》 《div class="user"》《img src="images/face.png" width="30" height="30"》oTwo《/div》 《/div》《/div》《/body》《/html》PS:自己替换 文本 图片
设计一段html和css代码,其中至少包含三个div,分别展示三种css+引入方式
html:
《!DOCTYPE html》
《html》
《head》
《title》My webpage《/title》
《/head》
《body》
《div》
《h1》My first div《/h1》
《p》This div uses inline CSS to style its content.《/p》
《style》
h1 {
color: red;
}
p {
font-size: 16px;
text-align: center;
}
《/style》
《/div》
《div》
《h1》My second div《/h1》
《p》This div uses an external CSS file to style its content.《/p》
《link rel="stylesheet" type="text/css" href="styles.css"》
《/div》
《div》
《h1》My third div《/h1》
《p》This div uses an embedded style sheet to style its content.《/p》
《style》
/* This is an embedded style sheet */
h1 {
color: blue;
}
p {
font-size: 14px;
text-align: left;
}
《/style》
《/div》
《/body》
《/html》
style.css:
/* This is an external style sheet */
h1 {
color: green;
}
p {
font-size: 18px;
text-align: right;
}
这段代码中，第一个div使用内联CSS来样式其内容，第二个div使用外部CSS文件来样式其内容，第三个div使用嵌入式样式表来样式其内容。
用div+css如何制作出这个网页效果
代码我把以前用到的代码改了下 给你发过来 应该用背景图片效果更好的 我换成颜色了 因为图片不好发上来 他那个就是选项卡效果 点击不同选项卡下面内容有变化css文件我也粘到下面了 自己改改就行了***隐藏网址******隐藏网址***《head》***隐藏网址***《title》充值《/title》《style》#Tab2{width:690px;margin:0px;padding:0px}.Menubox2 {background:#fff;height:33px;line-height:27px;padding-right:4px;padding-left:0px;}.Menubox2 ul{margin:0px;padding:0px; text-align:left}.Menubox2 li{float:left;display:block;cursor:pointer;width:100px;text-align:center;margin-top:6px;font-size:14px;color:#000;background-color:green;;margin-right:4px;}.Menubox2 li.hover{padding:0px;background:#fff;width:100px;background-color:red;color:#df0e5f;height:28px;line-height:28px;color:#fff;font-size:14px; font-weight:bold}.Contentbox2{background:#fff;clear:both;margin-top:0px;border:0px solid #A8C29F;border-top:none;height:226px;text-align:center;padding-top:8px;border:1px solid #6f74a9;}.Contentbox2 table{width:100%;}.Contentbox2 table td{padding:4px 4px 4px 4px; font-family:Arial, Helvetica, sans-serif;font-size:12px;}《/style》《script》《!--/*tab_style*/function setTab(name,cursel,n){for(i=1;i《=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con_"+name+"_"+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none";}}//--》《/script》《/head》《body》《div id="Tab2"》 《div class="Menubox2"》 《ul》 《li id="one1" onclick="setTab(’one’,1,4)" class="hover"》选项卡A《/li》 《li id="one2" onclick="setTab(’one’,2,4)"》选项卡B《/li》 《li id="one3" onclick="setTab(’one’,3,4)"》选项卡C《/li》 《li id="one4" onclick="setTab(’one’,4,4)"》选项卡D《/li》 《/ul》 《/div》 《div class="Contentbox2"》 《div id="con_one_1" class="hover"》 1 《/div》 《div id="con_one_2" style="display:none"》 2 《/div》 《div id="con_one_3" style="display:none"》 3 《/div》 《div id="con_one_4" style="display:none"》 4 《/div》 《/div》《/div》《/body》《/html》
