个旧云锡建设集团网站,福田商城网站建设哪家便宜,网站排名分析,新站优化任务
制作一个电商页面#xff0c;要求所卖物品清晰#xff0c;页面色调清晰#xff0c;要有主页和详情页。
网站所买物品#xff1a;书籍
色调#xff1a;#FF2400 橙红色
代码
主页HTML代码#xff1a;
htmlheadmeta charsetutf-8要求所卖物品清晰页面色调清晰要有主页和详情页。
网站所买物品书籍
色调#FF2400 橙红色
代码
主页HTML代码
htmlheadmeta charsetutf-8 /title/titlelink relstylesheet typetext/css hrefcss/1.css//headbodydiv classadiv classc1 c2div classb1p classc6img srcimg/文集logo.jpg width160px; height80px; /pdiv classb10p classb2 全部商品分类/pp ul classb3 typecircleli名家作品/lili青春文学/lili外国名著/lili考公考编/lili教辅资料/li/ul/p/div/divdiv classb4p classb5input typetext placeholder白夜行 classb6 !--制作搜索框--button classb7搜素/button/pp classb8span classb9图书/spanspan classb9电子书/spanspan classb9教辅/spanspan classb9漫画/spanspan classb9周边/spanimg srcimg/封面图.jpg width500px; height280px;/p/divdiv classe1div classe2p classe4购物车/pp classe5登录/注册/p/divdiv classe3p classe6排行榜/pol classe7li《生死疲劳》/lili《晚熟的人》/lili《我与地坛》/lili《蛤蟆先生去看心理医生》/li/ol/div/div /divdiv classc1 c3div classd1图书/电子书/divdiv classd2div classd3dt classd4img srcimg/图书1.jpeg width150px; height180px; /dtdd classd6 a hrefspecifics.html《我的职业是小说家》/a/dddd classd5¥25/dd/divdiv classd8p classd7img srcimg/图书2.jpg width100px; height80; alt span classd9余华《活着》/span/pp classd7img srcimg/图书3.jpeg width100px; height80; altspan classd9鲁迅《故事新编》/span/pp classd7img srcimg/图书4.jpeg width100px; height80; altspan classd9莫言《晚熟的人》/span/pp classd7img srcimg/图书5.jpg width100px; height80; altspan classd9当年明月《明朝那些事儿》/span/pp classd7img srcimg/图书6.jpeg width100px; height80; altspan classd9张嘉佳《从你的全世界路过》/span/pp classd7img srcimg/图书7.jpg width100px; height80; altspan classd9《读者》杂志/span/p/divdiv classd10div classd11/divp classd12a href更多/a/p/div/div/divdiv classc1 c4div classd1教辅/考证/divdiv classd2div classd3dt classd4img srcimg/教辅5.jpeg width150px; height180px; /dtdd classd6 a hrefspecifics2.html《二级office高级应用》/a/dddd classd5¥30/dd/divdiv classd8p classd7img srcimg/教辅1.jpeg width100px; height80; alt span classd9事业编综合应用能力教材/span/pp classd7img srcimg/教辅2.jpeg width100px; height80; altspan classd9考研《数学基础过关660题》/span/pp classd7img srcimg/教辅3.jpeg width100px; height80; altspan classd9《英语六级翻译30天速成》/span/pp classd7img srcimg/教辅4.jpg width100px; height80; altspan classd9《教师职业能力测验》/span/pp classd7img srcimg/教辅6.jpeg width100px; height80; altspan classd9《英语四级阅读理解》/span/pp classd7img srcimg/教辅7.jpg width100px; height80; altspan classd9《驾考宝典》/span/p/divdiv classd10div classd11/divp classd12a href更多/a/p/div/div/divdiv classc1 c5div classd1漫画/周边/divdiv classd2div classd3dt classd4img srcimg/漫画5.jpg width150px; height180px; /dtdd classd6 a hrefspecifics3.html《撒野》小说/a/dddd classd5¥35/dd/divdiv classd8p classd7img srcimg/漫画1.jpg width100px; height80; alt span classd9《撒野》相框/span/pp classd7img srcimg/漫画2.jpg width100px; height80; altspan classd9《偷偷藏不住》贴纸/span/pp classd7img srcimg/漫画3.jpeg width100px; height80; altspan classd9《狐妖小红娘》联名装饰品/span/pp classd7img srcimg/漫画4.jpeg width100px; height80; altspan classd9《难哄》明信册/span/pp classd7img srcimg/漫画6.jpg width100px; height80; altspan classd9《知音漫客》杂志/span/pp classd7img srcimg/漫画7.jpg width100px; height80; altspan classd9《魔道祖师》钥匙扣/span/p/divdiv classd10div classd11/divp classd12a href更多/a/p/div/div/div/div/body
/html主页CSS代码
*{padding:0;margin:0;
}
.a{width:1000px; height:1800px; border:0px solid black;margin:0px auto;}
.c1{width:900px; border:3px solid #E47833; margin-left:20px; margin-top:8px;}
.c2{height:450px;width:950px;margin-top:30px;}
.c3{height:380px;width:950px;margin-top:30px;}
.c4{height:400px;width:950px;margin-top:30px;}
.c5{height:400px;width:950px;margin-top:30px;}
.c6{border:0px solid black;width:160px; height:80px;margin:5px;
}
.b1{width:200px;height:360px;margin-top:10px;margin-left:10px;border:0px solid black;float:left;
}
.b2{width:100px;margin-left: 5px;margin-top: 15px;padding:5px;border:0px solid gray;
}
.b3{width:150px;height: 200px;margin-left: 5px;margin-top: 5px;padding-left:10px;border:0px solid gray;
}
.b4{width:550px;height:430px;border:0px solid cadetblue;float:left;margin:5px;
}
.b5{width:500px;height:80px;border:0px solid gray;margin:10px;
}
.b6{width:350px; height:30px;margin-top:20px;margin-left:15px;border:2px solid #FF2400;font-size: 15px;
}
.b7{width:40px;height:30px;margin-left:5px;background-color: #FF2400;position:absolute;margin-top:20px;margin-bottom:auto;text-align:center;border:0px;font-size:15px;
}
.b8{width:500px;height:300px;border:0px solid black;margin-left:5px;padding:5px;
}
.b9{width:30px;height:30px;border:0px solid gray;margin-top:5px;
}
.b9:hover{background-color: grey;
}
.b10{background-color: gray;
}
.d1{width:850px;height:35px;border:0px solid black;margin:10px;font-size:25px;text-align:left;
}
.d2{width:870px;height:300px;margin:10px;border:0px solid #856363;
}
.d3{width:200px;height:280px;margin:10px;border:2px solid #6B4266;float:left;
}
.d4{margin:5px;text-align: center;
}
.d5{color:#FF0000;text-align: center;
}
.d6{text-align:center;font-size:20px;
}
.d6:hover{background-color: #FF7F00;
}
.d7{float:left;margin-top:10px;margin-left:20px;width:150px; height:120px;border:0px solid #3299CC;text-align:left;padding:5px;
}
.d8{width:550px;height:280px;margin:10px;border:2px solid #6B4266;float:left;padding:5px;text-align:center;
}
.d9{font-size:10px;padding:1px;float:left;
}
.d9:hover{background-color: #FF7F00;
}
.d10{width:60px;height:280px;border:0px solid black;font-size:10px;margin-bottom:5px;margin-top:10px;text-align:center;float:left;padding-bottom: 5px;
}
.d11{width:40px;height:250px;border:0px solid black;margin:2px;
}
.d12{color:cornflowerblue;
}
.d12:hover{background-color: #FF7F00;
}
.e1{width:150px;height:400px;border:0px solid black;float:left;margin:10px;
}
.e2{width:130px;height:50px;border:0px solid black;margin:5px;
}
.e3{width:130px;height:250px;border:0px solid black;margin-top:40px;margin-left:5px;
}
.e4{width:50px;height:30px;border:0px solid black;margin-top:5px;float:left;font-size: 10px;padding-top:2px;
}
.e5{width:70px;height:30px;border:0px solid black;margin-left:2px;margin-top:5px;float:left;font-size:10px;padding-top:2px;
}
.e6{width:70px;height:30px;border:0px solid black;font-size:15px;padding-top:10px;margin-bottom:5px;margin-left:0px;
}
.e7{width:100px;height:150px;border:0px solid black;font-size:10px;padding-top:10px;margin:5px;
}
商品详情页HTML代码
htmlheadmeta charsetUTF-8title/titlelink relstylesheet typetext/css hrefcss/2.css//headbodydiv classwdiv classt1img srcimg/图书1.jpeg alt width250px; height350px;/divdiv classt2div classt3dd classt4书名《我的职业是小说家》/dddd classt5作者村上春树/dddd classt6价格/dddd classt7¥25/dd/divdiv classt8button classt10立即购买/buttonbutton classt9加入购物车/button/div/div/div/body
/html
商品详情页CSS代码
*{padding:0;margin:0;
}
.w{width:700px;height:500px;border:2px solid #FF2400;margin-left:0px;
}
.t1{width:300px;height:400px;border:0px solid black;margin-left:5px;margin-top:5px;float:left;padding-left:10px;padding-top:10px;
}
.t2{width:250px;height:400px;margin-top:10px;margin-left:10px;border:0px solid black;float:left;
}
.t3{width:220px;height:250px;margin-top:30px;margin-left:10px;border:0px solid black;
}
.t4{width:200px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;
}
.t5{width:200px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;
}
.t6{width:60px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;float:left;
}
.t7{width:60px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;float:left;color:red;
}
.t8{width:220px;height:50px;margin-top:10px;margin-left:10px;border:0px solid black;
}
.t9{width:80px;height:40px;margin:10px;border:2px solid deepskyblue;float:right;background-color: white;
}
.t10{width:60px;height:40px;margin:10px 5px;border:2px solid deepskyblue;float:right;background-color: white;
}
实现效果图
