提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

前端初尝试---品优购首页（只用HTML和CSS）（二）

HTML 前端
2023-03-14 22:44:14 时间

base.css

/*把我们所有的标签的内外边距清零 */
* {
 margin: 0;
 padding: 0;
 /*CSS3盒子模型*/
 box-sizing: border-box;
}
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
 html{ color:#000; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
 /* 内外边距通常让各个浏览器样式的表现位置不同 */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;}
 /* 要注意表单元素并不继承父级 font 的问题 */
 body,button,input,select,textarea{ font:12px/1.5 tahoma,arial,5b8b4f53;}
 input,select,textarea{ font-size:100%;}
 /* 去掉各Table cell 的边距并让其边重合 */
 table{ border-collapse:collapse;border-spacing:0;}
 /* IE bug fixed: th 不继承 text-align*/
 th{ text-align:inherit;}
 /* 对齐是排版最重要的因素, 别让什么都居中 */
 caption,th { text-align:left; }
 /* 去除默认边框 */
 fieldset,img{ border:0;}
 /* ie6 7 8(q) bug 显示为行内表现 */
 iframe{ display:block;}
 /* 去掉列表前的标识, li 会继承 */
 ol,ul,li{ list-style:none;}
 /* 一致的 del 样式 */
 del{ text-decoration:line-through; }
 /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
 h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500;}
 q:before,q:after {content:'';}
 /* 统一上标和下标 */
 sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
 sup {top: -0.5em;}
 sub {bottom: -0.25em;}
 /* 默认不显示下划线，保持页面简洁 */
 ins,a{ text-decoration:none;}
 /* 清理浮动 */
 .clearFloat:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
 .clearFloat{ zoom:1; /* for IE6 IE7 */}
 /* 设置内联, 减少浮动带来的bug */
 .floatLeft, .floatRight{ display:inline;}
 .floatLeft{ float:left;}
 .floatRight{ float:right;}
 /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
 /* HTML5 媒体文件跟 img 保持一致 */
 audio,canvas,video{ display: inline-block;*display: inline;*zoom: 1;}
 /* 去掉 firefox 下此元素的边框 */
 abbr,acronym{ border:0;font-variant:normal;}
 address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:500;}
 body{ color:#333;}
 a{ color: #666666;}
 a:hover{ color:#FF6600;}
 button,
 input {
  font-family: Microsoft YaHei, Heiti  SC, tahoma, Arial, Hiragino Sans GB, "2B8B4F53", sans-serif;
  border: 0;
  /*去除默认的灰色边框*/
  outline: none;
 }

common.css

/*声明字体图标 这里要注意路径的更换*/
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?50kdyc');
    src:  url('../fonts/icomoon.eot?50kdyc#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?50kdyc') format('truetype'),
    url('../fonts/icomoon.woff?50kdyc') format('woff'),
    url('../fonts/icomoon.svg?50kdyc#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.style_red {
    color: #c81623;
}
/*快捷导航*/
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
.shortcut ul li {
    float: left;
}
/*选择所有偶数的小li*/
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}
.arrow-icon::after {
    content: "ea50";
    font-family: 'icomoon';
    margin-left: 6px;
}
/*header 头部制作*/
.header {
    position: relative;
    height: 110px;
}
.logo {
    top: 25px;
    position: absolute;
    width: 254px;
    height: 83px;
}
.logo a {
    display: block;
    width: 254px;
    height: 83px;
    background: url(../images/logo.png) no-repeat;
    font-size: 0px;
}
.search {
    position: absolute;
    left: 346px;
    top:25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}
.search input {
    width: 454px;
    height: 32px;
    padding-left: 10px;
}
.search button {
    float: right;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}
.hotWords {
    position: absolute;
    top: 66px;
    left: 346px;
}
.hotWords a {
    margin: 0 10px;
}
.shopCar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
.count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #ffffff;
    background-color: #e60012;
    padding: 0 6px;
    border-radius: 7px 7px 7px 0;
}
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}
.nav .navitems {
    float: left;
}
.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}
.dropdown .dd {
    /*display: none;*/
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}
.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}
.dropdown .dd ul li:hover {
    background-color: #fff;
}
.dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #ffffff;
    content: ">";
}
.dropdown .dd ul li a {
    font-size: 14px;
    color: #ffffff;
}
.dropdown .dd ul li:hover a {
    color: #c81623;
}
.navitems ul li {
    float: left;
}
.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}
/*底部模块制作*/
.footer {
    height: 415px;
    padding-top: 30px;
}
.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
}
.mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background: url("../images/图标.png") no-repeat -110px -60px;
    margin-right: 8px;
}
.service-txt h4 {
    font-size: 14px;
}
.service-txt p {
    font-size: 12px;
}
.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
}
.mod_help dl {
    float: left;
    width: 200px;
}
.mod_help dl:last-child {
    width: 100px;
    text-align: center;
}
.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}
.mod_copyright {
    text-align: center;
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.links a{
    margin:0 10px;
}
.copyright {
    line-height: 20px;
}

index.css

.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}
.focus {
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;
}
.newflash {
    float: right;
    width: 250px;
    height: 455px;
}
.news {
    height: 165px;
    border: 1px solid #e4e4e4;
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {
    font-size: 14px;
    float: left;
}
.news-hd a {
    float: right;
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lifeservice {
    overflow: hidden;
    height: 209px;
    /*background-color: purple;*/
    border-right: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    /*background-color: skyblue;*/
    margin-top: 12px;
    background: url("../images/生活服务小图标.png") no-repeat -21px -14px;
}
.bargain {
    margin-top: 5px;
}
/*推荐模块*/
.recom {
    height: 163px;
    /*background-color: skyblue;*/
    margin-top: 12px;
}
.recom_hd {
    float: left;
    width: 205px;
    height: 163px;
    font-size: 20px;
    font-weight: bold;
    background-color: #5c5251;
    color: #ffffff;
    text-align: center;
    padding-top: 30px;
}
.recom_bd {
    float: left;
}
.recom_bd ul li {
    float: left;
    margin-top: 6px;
}
.recom_bd ul li:nth-child(even) {
    width: 1px;
    height: 133px;
    background-color: #ddd;
    margin-top: 11px;
}
/*家用电器模块*/
.box-hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
    margin-top: 20px;
}
.box-hd h3 {
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #c81623;
}
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li{
    float: left;
}
.tab_list ul li:nth-child(even) {
    width: 1px;
    height: 14px;
    background-color: #666666;
    margin: 8px 5px;
}
.box-bd {
    height: 361px;
    /*background-color: skyblue;*/
}
.tab_list_item>div{
    float: left;
    height: 361px;
}
.col_210 {
    width: 210px;
    text-align: center;
    background-color: #f9f9f9;
}
.col_210 ul {
    padding-left: 12px;
}
.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #cccccc;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
}
.col_329 {
    width: 329px;
    text-align: center;
}
.col_221 {
    width: 221px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
.col_219 {
    width: 219px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
.bb {
    display: block;
    border-bottom: 1px solid #cccccc;
}

相关文章