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

简介: 前端初尝试---品优购首页(只用HTML和CSS)

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,\5b8b\4f53;}
 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, "\2B8B\4F53", 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;
}
相关文章
|
2天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
29天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
58 7
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
37 6
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
48 1
|
29天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
44 5
|
29天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
37 5
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
36 1
[HTML、CSS]知识点
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
63 12
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
143 1