样式

最新推荐文章于 2021-03-20 20:47:42 发布
最新推荐文章于 2021-03-20 20:47:42 发布
阅读量277 收藏
点赞数
分类专栏： web 文章标签： Html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mtm001/article/details/108542659
版权 
/* base.css 的初始化 */

/* 指定当前css文件, 编码格式是utf-8 */
@charset "UTF-8";

/* 清除默认的外边距和内边距
    其实并不是每个标签都有默认的内外边距的，原来使用*的方法在大项目，
    动辄几万个标签的页面就非常消耗性能了,所以大项目中一般会找到有默认
    margin和padding的标签单独清除会更好一点
 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {
  margin: 0;
  padding: 0;
}

 img, input, button, textarea {
  border: none;
  padding: 0;
  margin: 0;
  /*去除点击之后的轮廓线*/
  outline-style: none;
}

ul, ol {
  list-style: none;
}

input {
  font-family: "SimSun", "宋体";
}

select, input, textarea {
  font-size: 12px;
  margin: 0;
}

textarea {
  /*禁止文本框的用户自由缩放*/
  resize: none;
}

img {
  border: 0;
  /* 设置图片默认的垂直对齐方式为中线对齐*/
  vertical-align: middle;
}

table {
  /*边框合并*/
  border-collapse: collapse;
}

body {
  /* 将整个页面的字体, 默认重置 */
  font: 12px/18px Microsoft YaHei, Arial, Verdana, "SimSun";
  color: #666;
  background: #fff;
}

/*双伪元素清除法：
    1、清除浮动
    2、解决margin的塌陷问题
*/
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 兼容 IE 67 */
.clearfix {
  *zoom: 1;
}

a {
  color: #666;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 100%;
}

/* 
  buis因为没有语义，所以不推荐用来给文字设置样式，但是有的时候需要一些没有语言的标签来打下手，
  比如字体图标等等，此时可以废物利用，把之前不推荐使用的标签去除样式，来用于其他用途。
*/
i, s {
  font-style: normal;
  text-decoration: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/*
  版心：宽度固定并且水平居中的盒子
  在使用别人写好的base.css文件时，注意每个页面的版心可能是不一样的，需要单独测量设置
*/
.w {
  width: 1200px;
  margin: 0 auto;
}

body {
  height: 3000px;
  
}

 

/*-top的样式*/

.top {

  /*width: */

  height: 31px;

  background-color: #f1f1f1;

}

.top .content {

  height: 31px;

  /*ps*/

  background-color: pink;

}

.top .content .left {

  width: 200px;

  height: 31px;

  background-color: yellow;

  line-height: 31px;

  float: left;

}

 

 

 

.top .content .left a {

  color: #be1920;

}

.top .content .right {

  float: right;

}

.top .content .right li {

  float: left;

  line-height: 31px;

}

.top .content .right li a {

  margin: 0px 16px;

}

.top .content .right li a .icon-moreunfold {

  font-size: 12px;

  margin-left: 10px;

}

.top .content .right li .last {

  margin-right: 0px;

}

 

 

/*search的样式*/

.search {

  height: 80px;

  /*ps*/

  /*background-color: hotpink;*/

  margin-top: 25px;

}

 

.search .logo {

  width: 171px;

  height: 62px;

  background: url(../images/logo.png);

  float: left;

}

 

.search .cart {

  width: 140px;

  height: 36px;

  box-sizing:border-box;

  background-color: #f8f8f8;

  float: right;

  margin-right: 63px;

  border: 1px solid #dedede;

  text-align: center;

  line-height: 36px;

  position: relative;

}

.search .cart .icon-cart {

  font-size: 14px;

  color: #d15357;

  font-weight: 700;

}

.search .cart .icon-more {

  font-size: 14px;

  margin-left: 4px;

}

.search .cart .num {

  /*最小宽度*/

  min-width: 16px;

  height: 14px;

  background-color: #dc1b30;

  position: absolute;

  top: -8px;

  /*right: 18px;*/

  left: 104px;

  border-radius: 6px 6px 6px 0px;

  color: #fff;

  line-height: 14px;

}

 

.search .cart .h {

  width: 200px;

  height: 100px;

  background-color: #f8f8f8;

  position: absolute;

  right: -1px;

  top: 34px;

  border: 1px solid #dedede;

  /*border-top: none;*/

  display: none;

}

.search .cart .h .hh {

  width: 138px;

  height: 1px;

  background-color: #f8f8f8;

  position: absolute;

  right: 0px;

  top: -1px;

}

.search .cart:hover .h {

  display: block;

}

.search .center {

  padding-left: 346px;

}

.search .center input[type="text"] {

  width: 458px;

  height: 36px;

  box-sizing:border-box;

  border: 2px solid #af1918;

  vertical-align: top;

  padding-left: 10px;

}

.search .center input[type="button"] {

  width: 80px;

  height: 36px;

  background-color: #af1918;

  color: #fff;

  font-size: 16px;

}

.search .center ul {

  padding-top: 8px;

}

.search .center ul li {

  float: left;

}

.search .center ul li a {

  font-size: 12px;

  padding: 0px 12px;

}

.search .center ul li .red {

  color: #d1171c;

}

 

 

 

/*nav的样式*/

.nav {

  /*width: */

  height: 45px;

  border-bottom: 2px solid #b1181a;

}

.nav .content {

  height: 45px;

  /*ps*/

  background-color: pink;

}

 

.nav .content .all {

  width: 209px;

  height: 45px;

  background-color: #b1181a;

  color: #fff;

  font-size: 16px;

  text-align: center;

  line-height: 45px;

  float: left;

}

.nav .content ul {

  float: left;

  padding-top: 13px;

}

.nav .content ul li {

  float: left;

}

.nav .content ul li a {

  color: #000;

  font-size: 16px;

  margin-left: 41px;

}

/*-banner的样式*/

.banner {

  height: 465px;

  /*ps*/

  /*background-color: pink;*/

}

 

 

/*左边的部分*/

.banner .left {

  width: 209px;

  height: 465px;

  background-color: #c81622;

  float: left;

}

 

 

 

 

.banner .left li {

  height: 31px;

  /*ps*/

  /*background-color: hotpink;*/

  line-height: 31px;

  padding: 0px 11px;

}

.banner .left li:hover {

  background-color: #f7f7f7;

}

.banner .left li:hover a {

  color: #c81622;

}

.banner .left li:hover .icon-more {

  color: #c81622;

}

.banner .left li a {

  color: #fff;

}

.banner .left li .icon-more {

  font-size: 12px;

  color: #fff;

  float: right;

}

 

 

/*-----------------------中间的部分*/

.banner .center {

  width: 721px;

  height: 455px;

  background: url(../images/banner_bg.png);

  float: left;

  margin-left: 10px;

  margin-top: 10px;

}

 

 

/*------------------------右边的部分*/

.banner .right {

  width: 250px;

  height: 455px;

  /*ps*/

  /*background-color: skyblue;*/

  float: right;

  margin-top: 10px;

}

 

.banner .right .one {

  width: 250px;

  height: 165px;

  box-sizing:border-box;

  border: 1px solid #e3e3e3;

  border-bottom: none;

}

 

.banner .right .one .otop {

  height: 32px;

  border-bottom: 1px dotted #e3e3e3;

  line-height: 32px;

  padding: 0px 15px;

  color: #000;

  font-size: 14px;

}

 

.banner .right .one .otop a {

  float: right;

  font-size: 12px;

}

 

.banner .right .one .otop a .icon-more {

  font-size: 12px;

}

.banner .right .one ul {

  padding-left: 15px;

  padding-top: 12px;

}

 

.banner .right .one ul li {

  height: 24px;

  font-size: 12px;

}

 

 

.banner .right .one ul li a {

  color: #656565;

}

 

.banner .right .one ul li a span {

  font-weight: 700;

  margin-right: 5px;

}

 

.banner .right .two {

  width: 250px;

  height: 210px;

  border: 1px solid #e3e3e3;

}

 

.banner .right .two td {

  border: 1px solid #e3e3e3;

  text-align: center;

  width: 25%;

  height: 33.33%;

}

 

.banner .right .two tr td div {

  width: 24px;

  height: 24px;

  background: url(../images/icons.png) -17px -16px;

  margin: 0 auto;

  margin-bottom: 12px;

}

 

.banner .right .three {

  margin-top: 5px;

}

 

/*-recommend的样式*/

.recommend {

  height: 163px;

  /*ps*/

  background-color:#ebebeb ;

  margin-top: 11px;

}

 

.recommend .today {

  width: 205px;

  height: 163px;

  background-color: #5c5251;

  color: #fff;

  font-size: 18px;

  text-align: center;

  float: left;

}

 

.recommend .today .clock {

  width: 57px;

  height: 57px;

  background: url(../images/clock.png);

  margin: 0 auto;

  margin-top: 31px;

  margin-bottom: 11px;

}

 

.recommend .good {

  width: 248px;

  height: 163px;

  background: url(../images/recommend01.png);

  float: left;

}

 

.recommend .line {

  width: 1px;

  height: 145px;

  background-color: #dddddd;

  float: left;

  margin-top: 9px;

}

 

/*------------------------like的样式*/

.like {

  height: 262px;

  /*ps*/

  /*background-color: pink;*/

  margin-top: 31px;

}

 

 

.like .ltop {

  height: 28px;

  /*ps*/

  /*background-color: hotpink;*/

  color: #000;

  font-size: 18px;

}

 

.like .ltop a {

  font-size: 12px;

  float: right;

  margin-right: 21px;

}

.like .ltop a .icon-refresh {

  font-size: 12px;

}

.like .lbottom {

  height: 233px;

  box-sizing:border-box;

  border: 1px solid #eeeeee;

}

.like .lbottom .item {

  width: 16.66%;

  height: 100%;

  /*ps*/

  /*background-color: pink;*/

  text-align: center;

  float: left;

}

.like .lbottom .item img {

  margin-top: 16px;

}

.like .lbottom .item .lv {

  height: 64px;

  /*ps*/

  /*background-color: pink;*/

  border-right: 1px solid #ececec;

  text-align: left;

  padding-left: 35px;

}

.like .lbottom .item .lv p {

  line-height: 21px;

}

.like .lbottom .item .lv span {

  color: #d93333;

  font-size: 16px;

}

.like .lbottom .item .last {

  border-right: none;

}

 

 

/*---------------------------------floor的样式*/

.floor {

  height: 390px;

  background-color: pink;

  margin-top: 29px;

}

.floor .ftop {

  height: 27px;

  /*ps*/

  background-color: skyblue;

  border-bottom: 2px solid #cb1524;

}

.floor .ftop span {

  color: #b72437;

  font-size: 18px;

}

.floor .ftop ul {

  float: right;

}

.floor .ftop ul li {

  /*height: 27px;*/

  float: left;

  line-height: 27px;

}

.floor .ftop ul li a {

  padding: 0px 14px;

}

.floor .fbottom {

  height: 360px;

  background-color: hotpink;

}

.floor .fbottom .tv {

  width: 210px;

  height: 360px;

  background-color: #f9f9f9;

  text-align: center;

}

.floor .fbottom .tv ul li {

  float: left;

  width: 50%;

  padding-left: 8px;

  box-sizing:border-box;

}

.floor .fbottom .tv ul li a {

  width: 86px;

  height: 32px;

  /*background-color: red;*/

  float: left;

  border-bottom: 1px solid #ededed;

  text-align: center;

  line-height: 32px;

}

 

 

 

.floor .fbottom .tv .one {

  margin-top: 26px;

  color: #c41b20;

  font-size: 18px;

  text-align: center;

  height: 23px;

}

 

.floor .fbottom .tv .two {

  color: #c41b20;

  text-align: center;

  height: 30px;

}

 

/*-icon部分的样式*/

.icon {

  height: 110px;

  background-color: #f5f5f5;

  margin-top: 37px;

}

.icon .content {

  height: 109px;

  border-bottom: 1px solid #ececec;

}

.icon .content .item {

  width: 20%;

  height: 100%;

  /*ps*/

  /*background-color: pink;*/

  padding-left: 37px;

  padding-top: 30px;

  box-sizing:border-box;

  float: left;

}

.icon .content .item div {

  width: 49px;

  height: 49px;

  background: url(../images/icons.png) -253px -3px;

  float: left;

  margin-right: 7px;

}

.icon .content .item .p1 {

  color: #000;

  font-weight: 700;

  margin-top: 8px;

  height: 23px;

}

 

 

/*-link的样式*/

.link {

  height: 188px;

  background-color: #f5f5f5;

}

 

.link .content {

  height: 187px;

  border-bottom: 1px solid #ececec;

  background-color: pink;

  padding-top: 21px;

  padding-left: 52px;

  box-sizing:border-box;

}

 

 

.link .content dl {

  float: left;

  width: 199px;

}

 

.link .content dt {

  color: #000;

  font-size: 16px;

  height: 30px;

}

.link .content dd {

  height: 20px;

}

 

 

汤永红
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
滚动条样式修改
热门推荐
coder_jxd的博客
04-16 3万+
浏览器中的滚动条样式大家一定都不陌生，其样式并不好康。可能很多小伙伴还不知道，这个东东的样式也可以修改（仅支持部分现代浏览器），本次就来带大家用 CSS 修改一下它的样式。
XCC MIXER1.46简体中文版
03-08
XCC MIXER1.46简体中文版。共和国之辉用xcc提取规则文件修改后重新压缩。
XCC MIXER 1.44汉化
04-24
XCC MIXER的汉化版基本全部汉化比以前的汉化更好
XCC.Mixer1.42.zip
08-01
很好用的红警 首先,确保你的Ra2(或YR)已经注册,然后运行XCC Mixer,请等待...他会自动读取你电脑的各个磁盘. 一、提取rules.ini文件 1、打开XCC MIXER 点左上角[文件]，点[打开]，进到红警目录，选择ra2.mix打开 2、双击local.mix进入这个子文件包 3、找到rules.ini文件，鼠标在它上面点右键，点提取文件 4、选择保存位置，一般指定红警目录 5、点保存即完成文件提取 二、如果要提取MOD的规则文件，则可打开它的MIX，找rules(md).ini通常在expand(md)**.mix 在左方框框类型(type)为text的文件里很快能找到它
PHP中设置下拉菜单样式,html select下拉框样式怎么制作？html select样式详解
weixin_32018379的博客
03-20 985
本篇文章主要的介绍了关于HTML select标签的下拉框制作，还有HTML select标签的样式解析，最后还有两个html select标签的案例。接下来让我们一起看看本篇文章吧首先我们先来看看html select下拉框样式的制作：原生的select下拉框其实挺方便的，直接把选项写入option就能得到一个流畅的下拉框，但是原生的样式也是让人忧愁。首先，在各大浏览器中渲染出来的样式结果也是多...
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
geoserver 基础通用样式
04-11
本文将围绕"GeoServer基础通用样式"这一主题，详细阐述如何创建和应用点、线、面样式，特别是透明面样式。 首先，我们来看"点"样式。在GeoServer中，点通常代表地理位置上的单一对象，如建筑物、公交站等。我们可以...
XCC_Mixer_1.46简体中文版.rar
10-26
XCC_Mixer_1.46简体中文版
XCC Mixer 文件解密
09-03
解密软件
Qt按钮QPushButton的自定义样式
最新发布
03-12
自定义图标位置（上下左右） 可以实现： 左图右字 右图左字 上图下字 下字上图 四种样式
javaHSSFCellStyle样式详解
03-12
HSSFCellStyle 样式详解 HSSFCellStyle 是一个实现了 CellStyle 接口的类，用于工作簿的工作页中每个单元格的高级样式展示。它提供了一些基本的样式设置，例如对齐方式、背景颜色、边框样式、字体样式等。 对齐...
QT精美样式表，超级好看
12-29
本资源聚焦于QT中的一个重要特性——样式表（QSS，Qt Style Sheets），这是一种类似于CSS的样式语言，用于定制QT界面的外观和感觉。 QSS允许开发者通过简单的文本文件定义控件的样式，包括颜色、字体、边框、阴影、...
Zotero参考文献样式
04-25
说明：（原始资源可在GitHub免费下载） 教程博客：http://t.csdn.cn/qxuUP 参考的原知乎教程：https://zhuanlan.zhihu.com/p/342753388 原始的GitHub链接为：...
红警2 技术篇 地图基础ini 教程
菜鸟的博客
03-25 8455
红警2  技术篇  地图基础ini 教程教程目录:首先,如何打开地图文件.第一节,单位建筑·中英对照表第二节,代码使用实战篇改速度,改价格,改武器,改血量,改地图........................等等第三节,注意事项首先,如何打开地图文件.在红警2中,非官网的地图格式 原版的是.mpr 尤里复仇的是.yrm 注意打开显示文件后缀!!! 打开地图方式,右键,选择打开方式,选择T...
日本JavaScript函数教学课件详解：背景色与样式控制
- 文字样式调整：提供了两个实例，一个是文字颜色变化，通过`ftcl`函数和`font.color`属性，另一个是文字大小变化，通过`ftsz`函数和`font.size`属性来实现： - 文字颜色： ```html (d1, 'blue')" ...> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤永红

一分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值