css比较好模仿的网页（谁能帮我仿百度首页出来啊DIV+CSS的）

本文目录

• 谁能帮我仿百度首页出来啊DIV+CSS的
• 对于html和css初学者,你有什么值得推荐的简单的网页适合练习
• 如何快速用css加div做一个简单的网页
• 急急急！~~~用css和html语言模仿Google的字母logo，要完整的页面代码
• 学div+css，以及javaScript希望找几个比较好的网页来模仿，能对所学的内容加以巩固和学习，望各位推荐下

谁能帮我仿百度首页出来啊DIV+CSS的

《style type="text/css"》
body {
margin:0;
padding:4px 8px;
}
h5, dd, dl, dt, form, pre {
margin:0;
padding:0;
font-weight:normal;
}
a img {
border:none;
}
td, div {
line-height:18px;
font-size:12px;
font-family:Arial;
}
h3 {
padding:0;
margin:0;
font:bold 14px/1.2 Arial;
}
dt {
padding:4px 10px;
}
dd {
line-height:20px;
}
dd h5 {
font-size:12px;
padding:4px 0;
}
.hide {
display:none;
}
#dealQuestion {
background:#f8f8f8;
padding:10px;
margin-top:10px;
}
#methodList dd input {
margin:8px 8px 0 0;
}
a:link {
color:#261CDC;
}
a:visited {
color:#800080;
}
#main {
width:100%;
min-width:760px!important;
max-width:979px!important;
}
#path {
height:25px;
line-height:25px;
font-size:12px;
}
#tab {
margin-top:3px;
height:21px;
font:14px/;
}
#aside {
float:right;
width:290px;
margin-top:25px;
}
#right2 {
float:right;
width:290px;
}
#center2 {
margin-right:300px;
padding-right:3px!important;
padding-right:0;
}
#content {
float:left;
width:100%;
margin-right:-300px;
}
#content_inner {
margin-right:302px;
overflow:hidden;
}
#ft {
clear:both;
margin-top:10px;
text-align:center;
color:#77C;
font:12px/1.5 Arial;
white-space:nowrap;
}
.bai {
width:100%;
position:relative;
zoom:1;
}
.p90 {
width:90%;
}
.t3 {
padding-left:10px;
height:24px;
line-height:24px;
border-width:1px 1px 0 1px;
border-style:solid;
font-size:14px;
font-weight:bold;
}
.t3_favor {
height:24px;
line-height:24px;
border-width:1px 1px 0 1px;
border-style:solid;
font-size:14px;
font-weight:bold;
}
.t1 {
padding-left:10px;
height:24px;
line-height:24px;
font-size:14px;
font-weight:bold;
}
.b3 {
padding:5px 5px 5px 8px;
border-width:0 1px 1px;
border-style:solid;
}
.bgg {
background-color:#DDF1D8;
}
.bgb {
background-color:#DEEEF4;
}
.bgy {
background-color:#FBF5C6;
}
.bgr {
background-color:#FFE8E6;
}
.bcg {
border-color:#58CB64;
}
.bcy {
border-color:#F4BF20;
}
.bcb {
border-color:#64B7D7;
}
.bcr {
border-color:#FE7878;
}
.b4y {
padding:5px 5px 5px 8px;
border:1px solid #F4BF20;
}
.b4g {
padding:5px 10px 8px 10px;
border:1px solid #58CB64;
}
.f14 {
font-size:14px;
line-height:22px;
}
.f14B {
font-size:14px;
line-height:22px;
font-weight:bold;
}
.tdx {
width:33%;
height:22px;
font-size:14px;
line-height:22px;
}
.B {
font-weight:bold;
}
.mb12 {
margin-bottom:12px;
}
.mb10 {
margin-bottom:10px;
}
.mt10 {
margin-top:10px;
}
.mt20 {
margin-top:20px;
}
.grn, a.grn:link, a.grn:visited {
color:#080;
}
.lbk, a.lbk:link, a.lbk:visited {
color:#000;
}
.lgy, a.lgy:link, a.lgy:visited {
color:#555;
}
.org, a.org:link, a.org:visited {
color:#f60;
}
.org {
color:#008000;
font-weight:bold;
}
a.lmore_relaques:link, a.lmore_relaques:visited {
font-weight:bold;
font-size:14px;
}
a.lklbe:link, a.lklbe:visited {
text-decoration:underline;
color:#77c;
}
.per80 {
line-height:80%;
}
.wr {
table-layout:fixed;
word-wrap:break-word;
}
.wr td {
padding-top:5px;
}
.gray {
color:#666;
}
.red {
color:#F30;
}
#Lbg {
margin:13px 0 7px 0;
height:1px;
line-height:1px;
border-top:1px solid #999;
}
#Lg {
border-top:1px dashed #DDD;
height:1px;
line-height:1px;
margin:7px 0 3px;
}
#Lq {
margin:7px 0 2px 0;
height:1px;
line-height:1px;
border-top:1px solid #E1E1E1;
}
.pl6 {
padding-left:6px;
}
.p30 {
padding:30px 0;
}
.p10 {
padding:10px;
}
#pg {
font-size:14px;
line-height:22px;
text-align:center;
}
#tl td {
border-top:1px dashed #E1E1E1;
}
.tlp4 td {
padding:4px 0 4px 6px;
}
#tl td.nl {
border:0;
}
.tlp3 td {
padding:3px 0 3px 6px;
}
.bl td {
border-bottom:1px solid #E1E1E1;
}
.p2 {
padding:2px;
}
.p4 {
padding:4px;
}
.p3 {
padding:3px;
}
.bl td.nl {
border:0;
}
.f12 {
font-size:12px;
}
.bn100 {
padding-top:2px;
height:25px;
width:100px;
}
.subt {
margin-bottom:5px;
padding-right:10px;
height:24px;
line-height:24px;
text-align:right;
}
.f {
line-height:120%;
font-size:100%;
width:32em;
padding-left:15px;
word-break:break-all;
word-wrap:break-word;
}
#pg {
font-size:14px;
word-spacing:0!important;
word-spacing:4px;
font-family:arial;
text-align:center;
height:30px;
line-height:30px;
margin-top:20px;
}
#pg font {
font-size:16px;
}
.bnsrh {
height:24px;
line-height:20px;
}
.mr20 {
margin-right:20px;
}
.note {
***隐藏网址***
margin:12px 0;
padding-left:20px;
font-weight:bold;
}
.answer1, .answer2, .answer3 {
***隐藏网址***
width:100px;
height:25px;
overflow:hidden;
}
.answer1 {
background-position:0 0;
}
.answer2 {
background-position:0 -25px;
}
.answer3 {
background-position:0 -50px;
}
#Lg {
border-top:1px dashed #bbb;
}
#cproshow .r {
word-break:break-all;
cursor:pointer;
width:100%;
}
#cproshow div.r font {
font-size:14px;
}
#cproshow div.r span font {
font-size:12px;
}
#cproshow {
border:0;
margin:0;
padding:0;
}
.t2 {
padding-left:10px;
height:24px;
line-height:24px;
font-size:14px;
font-weight:bold;
border-top:1px solid #FED6D2;
}
.bc {
padding:5px 5px 5px 8px;
margin:0 3px 3px;
background:#FFF;
}
.bc0 {
padding:5px 5px 5px 8px;
margin:0 3px 0;
background:#FFF;
}
.bc3 {
padding:5px 5px 5px 8px;
margin:3px;
background:#FFF;
}
.bg, .by, .bb, .bb_2, .br, .bk, .bka {
position:relative;
margin-bottom:12px;
}
.bg {
border:1px solid #A5DA94;
background:#DBF1D4;
}
.bg0 {
position:relative;
background:#DBF1D4;
}
.by {
border:1px solid #E3D686;
background:#F2EAB7;
}
.bb {
border:1px solid #9BC9DF;
background:#DBEDF5;
}
.bb_2 {
border:1px solid #d0ebc8;
background:#e8f7e4;
}
.br {
border:1px solid #E5ADA7;
background:#FED6D2;
}
.bk {
margin-bottom:0;
border:1px solid #BDBDBD;
background:#D7D7D7;
}
.bka {
border:1px solid #D4BAB8;
background:#ECECEC;
}
.tg {
height:3px;
overflow:hidden;
}
.h12 {
height:12px;
line-height:12px;
}
.fl {
float:left;
}
.fr {
float:right;
}
.clear {
font-size:0;
line-height:0;
clear:both;
visibility:hidden;
}
.p98 {
width:98%;
}
.pl10 {
padding-left:10px;
}
.tl {
text-align:left;
}
.tc {
text-align:center;
}
.tip-red {
color:#F00;
}
.dot {
border-bottom:1px dashed #E1E1E1;
}
.ico {
margin-top:4px;
width:20px;
float:left;
}
.ianswer, .irelate, .ibbs, .ibest, .icomment, .icosc, .igood, .iok, .istar, .ivote, .iwhy {
***隐藏网址***
width:16px;
height:16px;
margin-right:2px;
overflow:hidden;
float:left;
}
.ianswer {
background-position:0 0;
}
.ibbs {
background-position:0 -16px;
}
.ibest {
background-position:0 -32px;
}
.icomment {
background-position:0 -48px;
}
.icosc {
background-position:0 -64px;
margin-top:3px;
}
.igood {
background-position:0 -80px;
}
.iok {
background-position:0 -96px;
}
.istar {
background-position:0 -112px;
}
.ivote {
background-position:0 -128px;
}
.iwhy {
background-position:0 -144px;
}
.irelate {
background-position:0 -176px;
}
.status2 {
***隐藏网址***
padding:10px;
font-size:0;
}
.status0 {
***隐藏网址***
padding:10px;
font-size:0;
}
.status1 {
***隐藏网址***
padding:10px;
font-size:0;
}
.status3 {
***隐藏网址***
padding:10px;
font-size:0;
}
.rg {
border-left:1px solid #A5DA94;
border-right:1px solid #A5DA94;
zoom:1;
padding-bottom:1px;
background:#DBF1D4;
}
.rg_1, .rg_2, .rg_3, .rg_4, .rg_5 {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #A5DA94;
}
.rg_1 {
background:#A5DA94;
margin:0 3px;
}
.rg_5, .rg_2 {
border-left-width:2px;
border-right-width:2px;
}
.rg_4, .rg_3 {
border-left-width:1px;
border-right-width:1px;
}
.rg_4, .rg_5, .rg_2, .rg_3 {
background:#DBF1D4;
}
.ry {
border-left:1px solid #E3D686;
border-right:1px solid #E3D686;
zoom:1;
padding-bottom:1px;
background:#F2EAB7;
}
.ry_1, .ry_2, .ry_3, .ry_4, .ry_5 {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #E3D686;
}
.ry_1 {
background:#E3D686;
margin:0 3px;
}
.ry_5, .ry_2 {
border-left-width:2px;
border-right-width:2px;
}
.ry_4, .ry_3 {
border-left-width:1px;
border-right-width:1px;
}
.ry_4, .ry_5, .ry_2, .ry_3 {
background:#F2EAB7;
}
.rr {
border-left:1px solid #E5ADA7;
border-right:1px solid #E5ADA7;
zoom:1;
padding-bottom:1px;
background:#FED6D2;
}
.rr_1, .rr_2, .rr_3, .rr_4, .rr_5 {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #E5ADA7;
}
.rr_1 {
background:#E5ADA7;
margin:0 3px;
}
.rr_5, .rr_2 {
border-left-width:2px;
border-right-width:2px;
}
.rr_4, .rr_3 {
border-left-width:1px;
border-right-width:1px;
}
.rr_4, .rr_5, .rr_2, .rr_3 {
background:#FED6D2;
}
.rc {
zoom:1;
padding-bottom:1px;
}
.rc1, .rc2, .rc3, .rc4, .rc5 {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #000;
}
.rc1 {
margin:0 3px;
}
.rc5, .rc2 {
border-width:0 2px;
}
.rc4, .rc3 {
border-width:0 1px;
}
.rgg {
border:1px solid #D0EBC8;
border-width:0 1px;
}
.rgg_1, .rgg_2, .rgg_3, .rgg_4, .rgg_5 {
border-color:#D0EBC8;
}
.rgg_1 {
background:#D0EBC8;
}
.rgg, .rgg_4, .rgg_5, .rgg_2, .rgg_3 {
background:#E8F7E4;
}
.cp {
border-left:1px solid #FCD372;
border-right:1px solid #FCD372;
zoom:1;
padding-bottom:1px;
background:#FDE7A2;
}
.cp_1, .cp_2, .cp_3, .cp_4, .cp_5 {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #FCD372;
}
.cp_1 {
background:#FCD372;
margin:0 3px;
}
.cp_5, .cp_2 {
border-left-width:2px;
border-right-width:2px;
}
.cp_4, .cp_3 {
border-left-width:1px;
border-right-width:1px;
}
.cp_4, .cp_5, .cp_2, .cp_3 {
background:#FDE7A2;
}
.cp .t1 {
***隐藏网址***
padding-left:30px;
}
.relateTag {
padding-top:12px;
padding-left:12px;
}
.relateTag a {
white-space:nowrap;
word-break:keep-all;
margin-left:1em;
}
.relateTable td {
font-size:14px;
text-align:left;
}
td.queryMore {
padding-top:8px;
}
td.queryMore span {
color:#f03;
}
td.relateMore a {
font-weight:bold;
}
ul.push {
margin:0;
padding:0;
list-style:none;
zoom:1;
font-size:14px;
overflow:hidden;
}
ul.push li {
line-height:25px;
padding:4px 0 0 20px;
list-style:none;
***隐藏网址***
margin:0;
}
ul.push li a {
word-wrap:break-word;
word-break:break-all;
width:100%;
overflow:hidden;
}
ul.push li.hover {
background-position:0 10px;
}
#free_content {
padding:5px;
background:#fff;
font-size:12px;
color:#666;
zoom:1;
}
.rk {
border-left:1px solid #bdbdbd;
border-right:1px solid #bdbdbd;
padding-bottom:1px;
background:#d7d7d7;
padding:2px 3px;
}
.rk1, .rk2, .rk3, .rk4, .rk5 {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #bdbdbd;
}
.rk1 {
background:#bdbdbd;
margin:0 3px;
}
.rk5, .rk2 {
border-left-width:2px;
border-right-width:2px;
}
.rk4, .rk3 {
border-left-width:1px;
border-right-width:1px;
}
.rk4, .rk5, .rk2, .rk3 {
background:#d7d7d7;
}
.notice {
border-left:1px solid #a5da94;
border-right:1px solid #a5da94;
background:#dbf1d4;
padding:2px 10px;
}
.notice span {
font-size:14px;
font-weight:bold;
}
.nt_out, .nt_in {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #a5da94;
}
.nt_out {
background:#a5da94;
margin:0 2px;
}
.nt_in {
border-left-width:1px;
border-right-width:1px;
background:#dbf1d4;
}
.alert {
color:red;
}
#uploadImage {
margin-top:4px;
}
.smallImage, .ImageHold {
background:#F6F6F6 none repeat scroll 0 0;
border:1px solid #999;
padding:5px 5px 5px 5px;
}
.ImageHold {
visibility:hidden;
}
#unlogin_text {
margin-bottom:4px;
font-weight:bold;
***隐藏网址***
padding-left:24px;
}
#unlogin_text1 {
margin-bottom:4px;
font-weight:bold;
***隐藏网址***
padding-left:24px;
}
.unlogin {
color:#f90;
}
#bottom_info {
margin-top:10px;
margin-left:90px;
color:gray;
}
.pj {
height:39px;
clear:both;
float:left;
}
.pj_div {
color:#000;
float:left;
***隐藏网址***
cursor:pointer;
text-decoration:none;
display:block;
height:39px;
}
.pj span {
width:50px;
height:39px;
display:block;
float:left;
***隐藏网址***
}
.pj b {
float:left;
padding:10px 30px 12px 0;
color:#dd7368;
font-family:arial;
font-weight:bold;
font-size:16px;
}
.pj_divhover {
background-position:right -46px;
}
.pj_divhover span {
background-position:0 -46px;
}
.pj_divaction {
margin-top:2px;
}
.pj .pj_tip {
float:left;
background:none;
padding-top:12px;
padding-left:2px;
width:60px;
}
#sug {
border:1px solid #817F82;
display:none;
position:absolute;
top:28px;
left:0;
-moz-user-select:none;
}
#sug td {
font:14px verdana;
}
.mo {
background-color:#36c;
color:#fff;
}
.ml {
background-color:#fff;
color:#000;
}
.input_num {
text-align:right;
color:#666;
font-size:12px;
}
.num_error {
color:#f00;
margin:0;
display:none;
}
.num_right {
margin:0;
display:none;
}
.reply_modify {
background:#EBEBEB;
margin:10px 10px 10px 15px;
}
.reply_bg {
width:100%;
padding:10px 0;
border:1px solid #C0C0C0;
background:#f2fbef;
position:relative;
left:-8px;
*left:-5px;
top:-5px;
}
.reply_modify .iknowmap {
margin-left:-10px;
}
pre {
zoom:1;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
font-size:14px;
line-height:22px;
font-family:Arial;
}
.accuse_q, .accuse_a {
float:right;
margin-right:8px;
}
.accuse_q {
margin:3px;
}
.reply_ext {
margin-top:4px;
}
#usrbar {
line-height:19px;
font-size:12px;
font-family:Arial;
text-align:right;
white-space:nowrap;
}
.hd {
position:relative;
left:-2px;
z-index:999;
}
#usrbar a:visited, .hd a:active, .hd a:visited {
color:#261CDC;
}
.hdi {
font-size:16px;
font-family:Arial;
}
.btn {
padding-top:2px;
height:24px;
}
.headTitB {
font-weight:bold;
}
.notice {
border-left:1px solid #a5da94;
border-right:1px solid #a5da94;
background:#dbf1d4;
padding:2px 10px;
}
.notice span {
font-size:14px;
font-weight:bold;
}
.nt_out, .nt_in {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #a5da94;
}
.nt_out {
background:#a5da94;
margin:0 2px;
}
.nt_in {
border-left-width:1px;
border-right-width:1px;
background:#dbf1d4;
}
.box-inner {
border-left:1px solid #ddd;
border-right:1px solid #ddd;
padding:4px 10px;
background:#fff;
}
.box-out, .box-in {
height:1px;
overflow:hidden;
font-size:0;
margin:0 1px;
border:0 solid #ddd;
display:block;
}
.box-out {
margin:0 2px;
background:#ddd;
}
.box-in {
border-left-width:1px;
border-right-width:1px;
background:#fff;
}
.alert {
color:red;
}
.lka {
cursor:pointer;
color:#00C;
}
#nav_extra {
position:absolute;
z-index:65535;
font-size:12px;
text-align:left;
width:104px;
display:none;
}
#nav_extra a {
cursor:pointer;
position:static;
color:#00C!important;
text-decoration:underline!important;
line-height:18px;
}
#nav_extra .top {
border:1px solid #999;
background-color:#FFF;
padding:0 5px 3px;
position:absolute;
height:18px;
z-index:65531;
border-bottom:0;
top:3px;
*top:4px;
}
#nav_extra .body {
border:1px solid #999;
background:#FFF;
position:absolute;
top:24px;
*top:23px;
z-index:65530;
}
#nav_extra .body a {
display:block;
padding:3px 11px 3px 5px;
}
#nav_extra .body a:hover {
background:#e4e4e4;
}
#usrbar #my_home_container {
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
}
#tip {
width:231px;
position:absolute;
top:0;
z-index:1001;
***隐藏网址***
display:none;
}
#tip_holder {
position:absolute;
z-index:1000;
}
#tip_top {
height:20px;
}
.left_arrow {
***隐藏网址***
}
.right_arrow {
***隐藏网址***
}
#tip_icon {
float:left;
}
#tip_con {
padding:0 10px 12px 10px;
line-height:18px;
}
#tip_con dl {
margin:0 0 0 45px;
padding:0;
}
#tip_con dt {
font-weight:bold;
margin:0;
padding:0;
}
#tip_con dd {
margin:0;
padding:0;
}
#tip_detail {
text-align:right;
}
#tip_close {
position:absolute;
right:10px;
top:22px;
cursor:pointer;
}
.pop_btn_comm, .pop_btn_short, .pop_btn_long, .pop_btn_long2 {
cursor:pointer;
}
.pop_btn_comm {
width:77px;
height:32px;
font-size:14px;
font-weight:bold;
color:#2f5124;
border:none;
***隐藏网址***
}
.pop_btn_short {
width:92px;
height:32px;
font-size:14px;
font-weight:bold;
color:#2f5124;
border:none;
***隐藏网址***
}
.pop_btn_long {
width:104px;
height:32px;
font-size:14px;
font-weight:bold;
color:#2f5124;
border:none;
***隐藏网址***
}
.pop_btn_long2 {
width:149px;
height:32px;
font-size:14px;
font-weight:bold;
color:#2f5124;
border:none;
***隐藏网址***
}
.pop_text {
font-size:14px;
line-height:22px;
text-align:left;
}
.pop_text ul {
margin:5px 0;
padding:0;
list-style:none;
}
.pop_text .pop_more {
margin:0;
}
.pop_back {
padding:10px 0 0;
margin:0;
}
.imgupload, .map {
***隐藏网址***
padding:2px 0 0 21px;
line-height:16px;
}
.imgupload {
***隐藏网址***
}
#mapupload {
margin-right:14px;
}
《/style》
这是CSS，body里的内容自己查看源文件吧

对于html和css初学者,你有什么值得推荐的简单的网页适合练习

学习的方式很简单，找一个大的网站的页面，然后去仿。
用css和html写，写的一模一样就可以了。当然还要进行浏览器兼容性。
做的一模一样后，进行网页载入加速，这样你的水平就上来了。

如何快速用css加div做一个简单的网页

　　1
　　在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
　　2
　　做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上《link href="main.css" type="text/css" rel="stylesheet"》使它受到main.css控制
　　《html》
　　《head》
　　《title》《/title》
　　《/head》
　　《body》
　　《/body》
　　《/html》
　　3
　　下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
　　4
　　下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
　　《html》
　　《head》
　　《title》《/title》
　　《link href="main.css" type="text/css" rel="stylesheet"》
　　《/head》
　　《body》
　　《div id="top"》
　　《div id="top1"》《/div》
　　《div id="top2"》《/div》
　　《div id="top3"》《/div》
　　《/div》
　　《/body》
　　《/html》
　　5
　　布局好后我们需要去定义属性了，这里我只是简单的定义了一下
　　*{background:#FF33FF}
　　#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
　　#top1{background:#66FFFF; height:50px; width:800px;}
　　#top2{background:#FF00CC; height:400px; width:800px}
　　#top3{background:#FF9933; height:550px; width:800px}
　　定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
　　6
　　其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么
　　《html》
　　《head》
　　《title》《/title》
　　《link href="main.css" type="text/css" rel="stylesheet"》
　　《/head》
　　《body》
　　《div id="top"》
　　《div id="top1"》这里都是我截图的照片《/div》
　　《div id="top2"》
　　《div class="baidu"》《/div》
　　《div class="baidu"》《/div》
　　《/div》
　　《div id="top3"》
　　《div class="baidujingyan"》《/div》
　　《div class="baidujingyan"》《/div》
　　《/div》
　　《/div》
　　《/body》
　　《/html》
　　7
　　下面我们再去定义他的属性，当然我只是简单的定义一下
　　*{background:#FF33FF}
　　#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
　　#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}
　　#top2{background:#FF00CC; height:400px; width:800px}
　　#top3{background:#FF9933; height:550px; width:800px}
　　.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}
　　.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}
　　8
　　因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
　　《html》
　　《head》
　　《title》《/title》
　　《link href="main.css" type="text/css" rel="stylesheet"》
　　《/head》
　　《body》
　　《div id="top"》
　　《div id="top1"》这里都是我老婆的照片《/div》
　　《div id="top2"》
　　《div class="baidu"》《img src="QQ图片20141212090452.jpg"》《/div》
　　《div class="baidu"》《img src="QQ图片20141212090346.jpg"》《/div》
　　《/div》
　　《div id="top3"》
　　《div class="baidujingyan"》《img src="QQ图片20141212090224.jpg"》《/div》
　　《div class="baidujingyan"》《img src="QQ图片20141212090255.jpg"》《/div》
　　《/div》
　　《/div》
　　《/body》
　　《/html》
　　如果图片不在同一层目录，就需要连接到图片地址
　　9
　　这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
　　10
　　下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的

急急急！~~~用css和html语言模仿Google的字母logo，要完整的页面代码

《html》
《head》
***隐藏网址***
《style》
body {
font-family: TaTimes New Roman ;
font-size:60px;
}
《/style》
《/head》
《body》
《font color="blue"》G《/font》《font color="red"》o《/font》《font color="yellow"》0《/font》《font color="blue"》g《/font》《font color="green"》l《/font》《font color="red"》e《/font》
《/body》
《/html》
大概可能最简单的写法就是这样子的

学div+css，以及javaScript希望找几个比较好的网页来模仿，能对所学的内容加以巩固和学习，望各位推荐下

• 你还不如找本书好好学习一下呢，我的推荐：

• 先从简单的来吧，美团网虽然没有设计，但是里面的box model还是挺经典的。
  比较有技术的网页，那就看看apple吧，用的比较高级，而且还是HTML5