前端初尝试---品优购首页(只用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;
}
相关文章
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
1157 2
|
9月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
426 1
|
9月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
428 1
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
539 0
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
1385 1
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
上下文选择器(迭代选择器):基于祖先或同胞元素选择一个元素 ID和类选择器:基于id#和class的属性值进行选择元素。 属性选择器:基于属性的有无和特征进行选择。 ①上下文选择器: 上下文选择器的语法格式:标签1 标签2{属性:值;} //注意:组合选择器和上下文选择器的区别,组合选择器以逗号隔开, 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明:标签1和标签2
495 1
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
553 3
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
715 0
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
308 1
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中