（二）淘宝首页的代码（周六一天敲出来的）css样式展示。明天开始敲js方面的

其他 2020-04-28 14:48:54 阅读次数: 0 
#chdalu {
 width: 100%;
 height: 37px;
 font-size: 12px;
 }
#xiaopu {
 width: 100%;
 height: 70px;
 background-color: #F92B4C;
 }
#tbcom {
 width: 100%;
 height: 123px;
 background-color: #fff;
 }
#mkt {
 width: 100%;
 height: 550px;
 }
#goods {
 margin-top: 10px;
 width: 100%;
 height: 660px;
 background-color: #F4F4F4;
 }
 
#hair {
 margin: 10px 0;
 height: 72px;
 }

#head_wrap1 {
 width: 1190px;
 margin: 0 auto;
 }
#left_chdalu {
 float: left;
 }
#left_chdalu li {
 display: inline-block;
 margin-right: 5px;
 }
#left_chdalu li a {
 display: block;
 height: 37px;
 line-height: 37px;
 text-align: center;
 color: #686868;
 }
#left_chdalu li:first-child a {
 color: #3c3c3c;
 }
#left_chdalu li:nth-child(2) a {
 color: red;
 }
#left_chdalu li:nth-child(3) a:hover {
 color: red;
 }
#left_chdalu li:last-child a:hover {
 color: red;
 }
#rig_chdalu {
 float: right;
 }
#rig_chdalu li {
 float: left;
 margin-right: 5px;
 padding: 0 4px;
 }
#rig_chdalu li a {
 display: block;
 height: 37px;
 line-height: 37px;
 text-align: center;
 color: #686868;
 }
#rig_chdalu li a:hover {
 color: red;
 }
#shuxian {
 height: 35px;
 line-height: 35px;
 color: #DEDEE3;
 margin: 0 15px;
 }

#xiaopu {
 text-align: center;
 }

#tbcom_wrap {
 width: 1190px;
 height: 100%;
 margin: 0 auto;
 }
#tblogo {
 float: left;
 overflow: hidden;
 width: 190px;
 height: 100%;
 }
#tblogo h1 a {
 display: block;
 width: 142px;
 height: 58px;
 margin-top: 38px;
 margin-left: 24px;
 overflow: hidden;
 background: url(../img/tblogo.png) no-repeat 0 0;
 text-indent: -9999px;
 }
#search_box {
 float: left;
 width: 630px;
 height: 86px;
 margin-left: 68px;
 margin-top: 24px;
 }
#words ul {
 margin-left: 18px;
 }
#words li {
 width: 36px;
 height: 24px;
 margin: 0 2px;
 display: inline-block;
 line-height: 24px;
 text-align: center;
 cursor: pointer;
 font-size: 12px;
 color: #FF3E10;
 }
#words li:hover {
 background-color: #FFEEE5;
 }
#words li:first-child {
 background-color: #FF6F00;
 color: #fff;
 font-weight: 700;
 border-radius: 4px 4px 0 0;
 }
#searchbar {
 width: 628px;
 height: 36px;
 }
#searchbar input {
 float: left;
 padding-left: 14px;
 width: 540px;
 height: 100%;
 border: 2px solid #FF5000;
 border-right: 0;
 border-radius: 18px 0 0 18px;
 outline: 0;
 }
#searchbar button {
 float: left;
 width: 70px;
 height: 40px;
 border: 0;
 border-radius: 0 20px 20px 0;
 background-color: #FF6F00;
 outline: 0;
 font-size: 18px;
 color: #fff;
 font-weight: 700;
 cursor: pointer;
 }
#search_box a {
 font-size: 12px;
 color: black;
 }
#search_box a:hover {
 color: red;
 }
#search_box a:nth-child(5) {
 color: #FF5000;
 }
#phonetb {
 position: relative;
 float: left;
 margin-left: 116px;
 margin-top: 24px;
 width: 76px;
 height: 90px;
 border: 1px solid #eee;
 }
#phonetb a {
 display: block;
 width: 76px;
 height: 90px;
 text-align: center;
 }
#phonetb a span {
 font-size: 12px;
 color: #FF5000;
 line-height: 20px;
 }
#phonetb a img {
 width: 64px;
 }

#x {
 position: absolute;
 width: 16px;
 height: 16px;
 border: 1px solid #eee;
 top: -1px;
 left: -18px;
 color: #E6E6E6;
 cursor: pointer;
 }
#left_mkt {
 float: left;
 width: 188px;
 height: 550px;
 border: 1px solid #FF5000;
 }
#top_left_mkt {
 width: 100%;
 height: 30px;
 background-color: #ff5000;
 line-height: 30px;
 text-align: center;
 color: #fff;
 font-weight: 700;
 }
#btm_left_mkt ul {
 margin: 5px 0;
 }
#btm_left_mkt li {
 position: relative;
 overflow: hidden;
 width: 146px;
 height: 32px;
 padding-left: 24px;
 padding-right: 18px;
 line-height: 32px;
 font-size: 14px;
 color: #666;
 }
#btm_left_mkt li a {
 color: #666;
 }
#btm_left_mkt li a:hover {
 text-decoration: underline;
 }
#btm_left_mkt li:hover {
 background-color: #FFE4DC;
 color: #FF4615;
 }
#btm_left_mkt li:hover a {
 color: #FF4615;
 }
#btm_left_mkt li span {
 position: absolute;
 right: 10px;
 font-size: 12px;
 }
#rig_mkt {
 float: left;
 width: 1000px;
 height: 100%;
 }
#head_rig_mkt {
 width: 100%;
 height: 31px;
 background-color: #FF7A00;
 }
#left_head_rig_mkt {
 float: left;
 width: 216px;
 height: 100%;
 margin: 0 5px;
 font-size: 16px;
 font-weight: 700;
 }
#left_head_rig_mkt li {
 display: inline-block;
 margin: 0 3px;
 padding: 0 5px;
 line-height: 31px;
 }
#left_head_rig_mkt li a {
 display: block;
 
 color: #fff;
 }
#rig_head_rig_mkt {
 float: left;
 height: 100%;
 font-size: 14px;
 font-weight: 700;
 }
#rig_head_rig_mkt li {
 display: inline-block;
 margin: 0 3px;
 padding: 0 2px;
 line-height: 31px;
 }
#rig_head_rig_mkt li span {
 font-size: 12px;
 color: #FFF1E4;
 }
#rig_head_rig_mkt li a {
 display: block;
 color: #fff;
 }
#body_rig_mkt {
 width: 990px;
 height: 512px;
 margin: 10px 0 0 10px;
 }
#focus_brm {
 float: left;
 width: 522px;
 height: 510px;
 }
#focus1_brm {
 width: 522px;
 height: 282px;
 }
#focus2_brm {
 width: 522px;
 height: 230px;
 }
#up_focus2_brm {
 width: 100%;
 height: 18px;
 background: url(../img/TMALL.png) no-repeat 2px 0;
 }
#up_focus2_brm span {
 margin-left: 136px;
 font-size: 12px;
 color: #666;
 }
#up_focus2_brm i {
 font-style: normal;
 font-size: 10px;
 margin-left: 282px;
 }
#btm_focus2_brm {
 width: 100%;
 height: 212px;
 }
#btm_focus2_brm a {
 float: left;
 display: block;
 margin: 5px 5px 0;
 }
#btm_focus2_brm a:last-child {
 margin-left: 0;
 }
#mai_brm {
 float: left;
 width: 160px;
 height: 512px;
 margin-left: 10px;
 }
#temai_brm {
	width: 100%;
	height: 282px;
}
.daymai {
	width: 100%;
	height: 18px;
	margin-top: 5px;
	font-size: 12px;
	color: #A1A1A1;
}
#remai_brm {
	width: 100%;
	height: 202px;
}
#rig_brm {
	float: right;
	width: 290px;
	height: 512px;
}
#rig_brm1 {
	width: 100%;
	height: 140px;
	background: url(../img/rig_top_brm.png) no-repeat 0 0;
	background-size: 290px 146px;
}
#toux_rig_brm1 {
	width: 100%;
	height: 56px;
}
#yuan_toux_rig_brm1 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	margin: 6px auto;
	margin-bottom: 0;
}
#nihao_rig_brm1 {
	width: 100%;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-size: 12px;
}
#club_rig_brm1 {
	width: 100%;
	height: 14px;
	line-height: 18px;
	text-align: center;
}
#club_rig_brm1 a {
	background-color: #FFE4DB;
	font-size: 14px;
	color: #FF5000;
	padding: 2px 10px 2px 2px;
	border-radius: 7px;
}
#denglu_rig_brm1 {
	width: 100%;
	height: 26px;
	margin-top: 12px;
}
#denglu_rig_brm1 button {
	background-color: #FF6C05;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border: 0;
	border-radius: 4px;
}
#denglu_rig_brm1 button:first-child {
	width: 94px;
	height: 100%;
	line-height: 26px;
	text-align: center;
}
#denglu_rig_brm1 button:nth-child(2),
#denglu_rig_brm1 button:nth-child(3) {
	width: 76px;
	height: 100%;
	line-height: 26px;
	text-align: center;
}
#rig_brm2 {
	position: relative;
	display: block;
	width: 100%;
	height: 28px;
	background-color: #FFE4DD;
	font-size: 12px;
	color: #ff5000;
	line-height: 28px;
	text-align: center;
}
#rig_brm2 div {
	position: absolute;
	width: 0;
	height: 0;
	top: 10px;
	right: 52px;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #FF6C05;
}
#rig_brm3 {
	width: 100%;
	height: 108px;
}
#rig_brm3 {
	width: 100%;
	height: 234px;
}

#goods {
	width: 100%;
	height: 660px;
	margin-top: 12px;
}
#left_goods {
	float: left;
	width: 590px;
	height: 100%;
	background-color: #fff;
}
#inner_left_goods {
	width: 550px;
	height: 620px;
	margin: 20px;
}
#head_ilg {
	width: 100%;
	height: 24px;
	line-height: 24px;
}
#head_ilg p {
	float: left;
	margin-left: 5px;
	height: 24px;
	line-height: 24px;
}
#head_ilg img {
	float: left;
	height: 24px;
}
#head_ilg span {
	font-size: 12px;
	color: #999;
	line-height: 24px;
}
#body_ilg, 
#body_irg {
	width: 550px;
	height: 580px;
	margin: 20px 0;
}
#body_ilg li,
#body_irg li {
	float: left;
	width: 180px;
	height: 270px;
}
#body_ilg li a,
#body_irg li a {
	display: block;
	width: 180px;
	height: 270px;
}
#head_li01 {
	background-color: #4f4f4f;
}
#head_li01 img {
	width: 100%;
	height: 180px;
	display: block;
	transition: all .2s;
	margin-bottom: 10px;
	border: 0;
}
#head_li01 img {
	opacity: .9;
}
#head_li span {
	margin-left: 5px;
	color: black;
}
#body_ilg p,
#body_irg p,
#head_li i {
	font-style: normal;
	font-size: 14px;
	color: #999;
	margin-left: 5px;
	margin-top: 10px;
}
.sayok {
	font-size: 14px;
	color: #35B1FF;
	margin-left: 5px;
	margin-top: 20px;
}
#body_ilg li,
#body_irg li {
	margin-right: 4px;
	margin-bottom: 20px;
	overflow: hidden;
}
#body_ilg li:nth-child(3n),
#body_irg li:nth-child(3n) {
	margin-right: 0;
}
#rig_goods {
	float:right;
	width: 590px;
	height: 100%;
	background-color: #fff;
}
#inner_rig_goods {
	width: 550px;
	height: 620px;
	margin: 20px;
}
#head_irg {
	width: 100%;
	height: 24px;
	line-height: 24px;
}
#head_irg img {
	float: left;
	height: 24px;
}
#head_irg p {
	float: left;
	margin-left: 10px;
	line-height: 24px;
	font-size: 12px;
	color: #999;
}
#head_irg a {
	display: inline-block;
	float: right;
	margin-left: 10px;
	line-height: 24px;
	font-size: 12px;
	color: #999;
}
#head_li001 {
	background-color: #ededed;
}

#gshop {
	width: 100%;
	height: 538px;
	background-color: #f4f4f4;
}
#left_gshop,
#rig_gshop {
	width: 590px;
	height: 100%;
	background-color: #fff;
}
#left_gshop {
	float: left;
}
#rig_gshop {
	float: right;
}
#head_lg,
#head_rg {
	width: 550px;
	height: 24px;
	margin-left: 20px;
	margin-top: 20px;
}
#head_lg img,
#head_rg img {
	float: left;
	height: 24px;
}
#head_lg p,
#head_rg p {
	line-height: 24px;
	font-size: 12px;
	color: #999;
}
#head_lg .p1,
#head_rg .p1 {
	float: left;
	margin-left: 10px;
}
#head_lg .p2 {
	float: right;
	margin-left: 10px;
}
#body_lg,
#body_rg {
	width: 100%;
	height: 472px;
	margin-left: 20px;
}
#body_lg li,
#body_rg li {
	float: left;
	width: 270px;
	height: 230px;
	margin-top: 5px;
	margin-bottom: 14px;
	margin-right: 4px;
}
#body_lg a,
#body_rg a {
	display: block;
	width: 270px;
	height: 230px;
}
#up_blgli,
#up_brgli {
	width: 100%;
	height: 42px;
}
#up_blgli p,
#up_brgli p {
	line-height: 42px;
}
#up_blgli p:first-child,
#up_brgli p:first-child {
	float: left;
	color: black;
}
#up_blgli p:nth-child(2),
#up_brgli p:nth-child(2) {
	float: left;
	margin-left: 10px;
	font-size: 12px;
	color: #999;
	overflow: hidden;
}
#up_blgli p:first-child:hover,
#up_brgli p:first-child:hover {
	color: red;
}
#down_blgli,
#down_brgli {
	width: 100%;
	height: 182px;
}
#left_down_blgli,
#left_down_brgli {
	float: left;
	width: 178px;
	height: 178px;
	background-color: #4f4f4f;
}
#left_down_blgli img,
#left_down_brgli img {
	width: 178px;
	height: 178px;
	display: block;
	opacity: .9;
}
#rig_down_blgli,
#rig_down_brgli {
	float: right;
	width: 88px;
	height: 88px;
	background-color: #4f4f4f;
}
#rig_down_blgli img,
#rig_down_brgli img {
	width: 88px;
	height: 88px;
	opacity: .9;
	display: block;
	margin-bottom: 2px;
}
#left_down_brgli {
	position: relative;
}
#live {
	position: absolute;
	width: 100%;
	height: 36px;
	line-height: 36px;
	left: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 2;
	color: #fff;
	background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));
}
#left_live {
	float: left;
	margin-left: 4px;
	margin-top: 12px;
	width: 26px;
	height: 10px;
	line-height: 8px;
	border-radius: 2px;
	background-color: #FF2658;
}
#left_live span {
	overflow: hidden;
	line-height: 10px;
	font-size: 8px;
}
#live p {
	overflow: hidden;
	float: left;
	font-size: 14px;
}

#fashion {
	width: 100%;
	height: 290px;
	margin: 10px 0;
	background-color: #f4f4f4;
}
#left_fas {
	float: left;
	width: 840px;
	height: 100%;
	background-color: #fff;
}
#head_left_fas {
	width: 100%;
	height: 54px;
	line-height: 54px;
}
#head_left_fas span {
	float: left;
	display: block;
	margin-left: 20px;
	margin-top: 18px;
	width: 4px;
	height: 16px;
	background-color: #8558D6;
}
#head_left_fas h4 {
	float: left;
	margin-left: 10px;
	font-size: 20px;
	color: #AF4BE0;
}
#body_left_fas {
	width: 100%;
	height: 236px;
}
#body_left_fas li {
	float: left;
	width: 258px;
	height: 100%;
	padding-left: 20px;
	border-style: solid;
	border-width: 1px;
	border-color: #F4F4F4 #F4F4F4 transparent transparent;
}
#body_left_fas li:nth-child(3) {
	border-right: 0;
}
#body_left_fas li:hover {
	border: 1px solid red;
}
#body_left_fas li a {
	display: inline-block;
	margin-top: 32px;
	margin-bottom: 10px;
	font-size: 20px;
	color: #3C3C3C;
}
#body_left_fas li a:hover {
	color: red;
}
#body_left_fas li p {
	font-size: 14px;
	color: #999;
}
#down_blf {
	width: 260px;
	height: 162px;
}
#body_left_fas li #left_dblf,
#body_left_fas li #rig_dblf {
	margin-top: 12px;
}
#left_dblf {
	float: left;
}
#rig_dblf {
	float: right;
	margin-right: 10px;
}
#rig_fas {
	float: right;
	overflow: hidden;
	width: 298px;
	height: 268px;
	background-color: #fff;
	padding: 20px 20px 0;
	border: 1px solid transparent;
}
#rig_fas:hover {
	border: 1px solid red;
}

#ulike {
	width: 100%;
}
#head_ulike {
	width: 100%;
	height: 52px;
	line-height: 52px;
}
#head_ulike span {
	float: left;
	display: block;
	margin-left: 20px;
	margin-top: 18px;
	width: 4px;
	height: 16px;
	background-color: #FF9F00;
}
#head_ulike h4 {
	float: left;
	margin-left: 10px;
	font-size: 20px;
	color: #FFA106;
}
#body_ulike {
	width: 100%;
}
#body_ulike li {
	position: relative;
	float: left;
	border: 1px solid #F4F4F4;
	width: 237px;
	height: 332px;
	margin-left: -1px;
	margin-top: -1px;
}
#body_ulike li:nth-child(5n+1) {
	border: 1px solid #F4F4F4;
}
#inner_li {
	width: 197px;
	height: 312px;
	margin: 20px 20px 0;
}
#inner_li a {
	display: block;
	width: 100%;
	height: 244px;
}
#inner_li_box {
	width: 100%;
	height: 197px;
	background-color: #4f4f4f;
}
#inner_li_box img {
	display: block;
	width: 197px;
	opacity: .9;
}
#inner_li .p0 {
	font-size: 14px;
	color: #666;
	margin: 10px 0;
	line-height: 22px;
}
#down_inner_li {
	width: 100%;
	height: 52px;
	line-height: 52px;
	font-family: 'microsoft yahei';
}
#down_inner_li span {
	float: left;
	font-size: 18px;
	color: #FF5F25;
}
#down_inner_li i {
	float: right;
	font-style: normal;
	font-size: 12px;
	font-weight: 400;
	color: #9DA1AB;
}
#down_inner_li span::before {
	content: "¥";
	font-size: 12px;
}
#body_ulike #hidbtm_inner_li {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 82px;
	background-color: #FF4300;
	text-align: center;
	display: none;
}
#hidbtm_inner_li p:first-child {
	margin-top: 22px;
	color: #fff;
	font-size: 18px;
}
#hidbtm_inner_li span {
	display: block;
	width: 120px;
	height: 1px;
	background-color: #FE964A;
	margin: 8px auto;
}
#hidbtm_inner_li p:last-child {
	font-size: 12px;
	color: #fff;
}

#footer {
	width: 100%;
	height: 525px;
	overflow: hidden;
}
棒棒糖！要原味的
原创文章 22 获赞 4 访问量 2588
关注 私信

猜你喜欢

转载自blog.csdn.net/tuzi007a/article/details/105609110
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022