- 1
- 2
- 3
文档库 最新最全的文档下载
当前位置：文档库 › HTML代码4种范例——网页设计
HTML代码4种范例——网页设计
范例1——Shopping_mall 效果图
HTML代码
2012夏季童装男
零售价：¥55.00
市场价：¥79.00
2012夏款女大童牛
零售价：¥49.00
市场价：¥=
2012夏装新款网纱
零售价：¥49.00
市场价：¥69.00
2012夏季新款男
style="margin-top:8px;">零售价：¥39.00
市场价：¥49.00
2012夏季韩版
零售价：¥38.00
市场价：¥=
童装女童夏装2012
零售价：¥49.00
市场价：¥=
2012春秋女婴儿
零售价：¥39.00
市场价：¥=
1新款时尚韩版秋装男
零售价：¥108.00
市场价：¥138.00
全国统一服务热线(免长途费)
400-676-5919
会员服务：010-********
售后服务：010-********
服务服务7X24小时
2014 gujianbo 京ICP证052564**号
CSS代码
@charset "utf-8";
/* CSS Document */
*{margin:0px; padding:0px;}
span{color:#CC0003;}
body{font:normal 12px/24px "宋体";color:#545454;}
.float{ float:left;}
a{color:inherit;text-decoration:none;border-style:none; border-style:none;}
img{ border:none;}
ul{list-style-type:none;}
.r{border:1px solid red;}
#container{margin:0px auto;width:1084px;height:1600px;}
.header{width:100%; height:170px;background:url(../images/header_mid_bg.gif) no-repeat;}
.header_top{background: #F5F5F5; width:100%; height:25px; border-bottom:1px solid #CCC;}
.header_top ul li{float:left; color:#656565;}
.header_top ul li a:hover{text-decoration:underline;}
.header_top_small_navigation{padding:0px 10px 0px 7px;}
.header_top_small_navigation a{display:block;}
.header_mid{width:inherit; height:89px; }
.header_mid p{float:left;padding-top:16px;}
.header_mid form{margin-left:606px; margin-top:5px;width:422px;height:30px; background: #C30203;}
.header_mid form input{float:left; margin-top:2px;}
.header_mid_font{ font-size:13px;font-family:"黑体";}
.header_mid_font2{ font-size:20px;font-weight:bold; font-family:"黑体";}
.search_input{height:23px; width:341px; margin-left:2px;padding-left:5px;}
.navigation{width:inherit; height:55px; background:url(../images/header_navigation_bg.gif) repeat-x bottom;}
.navigation p,.navigation p ul,.navigation ul li{ float:left;}
.navigation ul li{color:white; font:bold 15px "宋体";padding-top:16px;display:block;}
.navigation ul li a{padding:10px 20px;}
.navigation_bg_border{background:url(../images/header_navigation_bg_border.gif) no-repeat bottom; width:3px; height:28px;}
.navigation_first_item,.navigation ul li a:hover{background:url(../images/header_navigation_bg2.gif) repeat-x;}
.content{width:990px;height:1150px; margin:0 auto;}
.content_top_wide_boder{width:980px;height:20px; border:1px solid #E4E4E4; border-top-style:none; }
.content_top_wide_boder_bg{background:url(../images/content_top_wide_boder_bg.gif) repeat-x bottom; height:14px; width:978px;border:1px solid white;
padding-top:4px;position:absolute;z-index:-1;}
.content_left{width:215px;height:90%; float:left;}
.content_left_login{width:213px; height:138px; margin-top:10px;}
.content_left_login img,.content_left_login div{float:left;}
.content_left_login_bg{background:url(../images/content_left_login_bg.gif) repeat-x; width:211px; height:98px; border:1px solid #DAD7AC; border-top-style:none;}
.content_left_login_bg form{ margin-left:20px; font-weight:bold;}
.content_left_login_bg_input{ width:115px; height:20px; margin-top:3px; border:1px solid #B79D7C; padding-left:5px;}
.content_left_login_bg_p1{display:inline;padding-left:13px;}
.content_left_login_bg_p2{margin-top:10px; margin-left:20px;}
.content_left_classification_of_goods{width:inherit; height:235px; background: url(../images/classification_of_goods.jpg) no-repeat; margin-top:10px;}
.content_left_classification_of_goods ul{padding-top:36px; padding-left:8px;}
.content_left_classification_of_goods ul a{background:url(../images/classification_select_bg.gif) no-repeat 0px 0px; width:197px; height:30px; display:block; padding-left:10px; margin-top:2px; font:bold 15px/30px "宋体";}
.content_left_classification_of_goods ul a:hover{background-position:0px -30px;}
.content_left_suitable_price{width:inherit; height:129px; background: url(../images/suitable_price.jpg) no-repeat; margin-top:10px;}
.content_left_suitable_price ul{ width:200px;padding-top:28px; padding-left:10px;}
.content_left_suitable_price ul li{float:left;width:89px; height:24px;margin-top:5px; margin-left:5px; color:#974607;}
.content_left_suitable_price ul a{background:url(../images/suitable_price_select.gif) no-repeat 0px 0px; width:89px; height:24px;padding-left:21px; margin-top:2px; display:block;font:bold 12px/24px "宋体";}
.content_left_suitable_price ul a:hover{background-position:0px -24px;}
.content_left_hot_sale{width:210px;height:230px; border:1px solid #DBDBDB;padding:1px;}
.content_left_hot_sale_border2{background:#F1F1F1;width:208px; height:228px;padding:1px;} .content_left_hot_sale_border3{background:white;height:inherit;}
.content_left_hot_sale_border3 ul{padding-left:2px;}
.content_left_hot_sale_border3 ul a:hover{ font-weight:bold;}
.content_left_hot_sale_border3 ul li{ font-size:11px;float:left;line-height:13px; margin-top:9px; margin-left:5px;overflow:hidden;}
.content_left_hot_sale_redgif,.content_left_hot_sale_orangegif{background-repeat:no-repeat; width:13px; height:13px; text-align:center; font:bold 8px/13px "宋体";color:white;}
.content_left_hot_sale_redgif{ background-image:url(../images/hot_sale_redgif.gif);}
.content_left_hot_sale_orangegif{ background-image:url(../images/hot_sale_orangegif.gif);}
.conten_MidAndRight{width:760px;height:1115px;float:left; margin-left:10px; padding-top:10px;} .gray_border{border:1px solid #CCC;}
.content_mid{width:540px;}
.content_mid_mid{height:88px;padding:1px;}
.content_mid_mid_top{width:537px;
height:26px;background:url(../images/content_mid_mid_bg.gif) repeat-x;}
.content_mid_mid_bottom{text-align:center;}
.content_mid_mid_bottom img{margin-top:15px;}
.content_mid_bottom{width:538px; height:160px; margin-top:10px; border-top:none;}
.content_mid_bottom ul li{float:left;height:28px;}
.content_mid_bottom ul li a{ background-image:url(../images/changeable_imagges/conten_mid_classification.jpg);height:2 8px;display:block;}
.content_mid_bottom_classification1 a{background-position:0px 0px;width:178px;}
.content_mid_bottom_classification11 a{background-position:0px -28px;width:178px;}
.content_mid_bottom_classification2 a{background-position:-178px 0px;width:183px;}
.content_mid_bottom_classification22 a{background-position:-178px -28px;width:183px;}
.content_mid_bottom_classification2 a:hover{background-position:-178px -28px;}
.content_mid_bottom_classification3 a{background-position:-360px 0px;width:177px;}
.content_mid_bottom_classification33 a{background-position:-360px -28px;width:177px;}
.content_mid_bottom_classification3 a:hover{background-position:-360px -28px;}
.orange_border{border-bottom:2px solid #FBB601; height:28px;}
.dotted_border{border-right:2px dotted #999999;}
.content_mid_bottom_classification_div1{width:245px; height:105px; margin:10px 0px 0px 15px;}
.content_mid_bottom_classification_div1 ul{padding-left:8px;}
.content_mid_bottom_classification_div1 ul li{float:left;height:18px; line-height:12px;}
.content_right{width:204px; margin-left:13px;}
.content_right_MallInformation{background:url(../images/myPicture.jpg) no-repeat; width:204px; height:213px;}
.content_right_MallInformation p{text-align:right; width:185px; padding-top:10px;}
.content_right_MallInformation a:hover{ text-decoration:underline;}
.content_right_MallInformation ul{list-style: inside;padding-top:20px; padding-left:15px;}
.content_bottom{width:756px;min-height:530px; border-top:none; padding-bottom:10px;}
.content_bottom_p{color:white;text-align:right;padding:3px 15px 0px 0px;}
.content_bottom_p a:hover{text-decoration:underline;}
.content_bottom_line_height{line-height:8px;}
.content_bottom_line_height2{line-height:18px;}
.content_bottom_hot_goods{width:162px;height:216px; margin-left:20px; margin-top:23px;}
.footer{width:981px;height:175px;border-top:2px solid #B80405;}
.massege{width:670px;height:150px;padding-left:20px; padding-top:13px;}
.massege_son{height:70px;padding-left:49px;padding-right:60px;}
.massege_son h4{font-size:13px; padding-bottom:3px; color:#A72026;}
.massege_son p{line-height:21px; color:#747474;}
.massege_son p a:hover{text-decoration:underline;}
.information{background:url(../images/footer_information.gif)
no-repeat;width:235px;height:139px;margin-left:7px;padding-top:13px;padding-left:34px;}
.information p{line-height:20px;}
.information_p_type1{font:bold 15px "宋体";color:#6A6A6A;}
.information_p_type2{font:bold 20px "宋体";color: #A72128;}
.footer_img{width:981px;height:60px; border:1px solid #EBEBEB; margin-top:10px;}
.footer_img img{float:left; margin-left:31px; margin-top:6px;}
#changeable_img{ position:absolute; z-index:1;}
#changeable_box{margin:255px 0px 0px 412px; position:absolute;list-style-type:none;z-index:2;} #changeable_box li{ float:left; width:18px; height:18px; background-color:black; color:white; text-align:center; margin-left:5px; font:bold 12px/18px "宋体"; border:1px solid white;}
范例2——Student_assistant_principal 效果图
HTML代码
Css代码
@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px;}
.r{ border:1px solid red;}
ul{list-style-type:none;}
a{ text-decoration:none;}
.containner{width:789px; margin:0px auto;height:1050px;}
.containner ul{ height:30px;}
.containner ul li{ float:left;width:110px; font: bolder 17px "黑体"; padding-top:6px;}
.containner ul li a{color: #0C69A0;}
.containner ul li a:hover{ color: #09F;}
.z-index_{position:absolute; z-index:-1;}
.div_content{width:550px;height:640px; margin:0px auto; padding:15px;}
.div_content ul li{width:550px;}
.div_content ul li a{ font-weight:normal;color: #06C;}
.div_content ul li a:hover{font-weight:bold;color: #69F;}
.footer{ margin-top:0px; background-image:url(../images/main_06.png);width:100%;height:100%; background-repeat:repeat-x; height:85px; text-align:center; font:bold 26px/36px "楷体"; padding-top:20px; color: #10539C;}
范例3——Xiamen_University2 效果图
HTML代码
相关文档