一,base.css基础样式表的意义

我昨天,整理了一下代码规范。

发现现在这个程度的页面还原。有必要创建一个规范的base.css库和framework.css库

而且也要为日后的工作整理一些常用的基础css,你们想象一下日后在公司里上班,如果每次都要逐一新增基础样式,那么花费的时间就会滴水长流。其二,自己创建一个base样式,可以缩减样式的字符。在页面载入html的时候可以缩减时间。如:

.pct80{width:80%;}
.l{float:left;}
这样的基础样式,在每个页面里都是要使用的。而且我的命名规范都是面向性命名。即所见即所得。
总结:1,一次link引入,减小代码量
  2,规范每次的代码输入
  3,减少html载入时间
  4,还可以分享
在查看相关的文章后,自己初步建立了自己的base库
/* ---------------------公用 CSS----------------------- */
/* float */
.l{float:left;}
.r{float:right;}
/* clear */
.cl{clear:both;}
/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}
/* position */
.rel{position:relative;}
.abs{position:absolute;}
/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}
/* text-align */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;} /* 块状元素水平居中 */
.auto{margin-left:auto; margin-right:auto;}
/* 大小不定元素垂直居中 */
.dib-vam{display:inline-block; width:; height:100%; vertical-align:middle;}
/*图层定位水平垂直居中*/
.pat{ position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
/*flex水平垂直居中*/
.df-cc{display:flex;justify-content: center;align-items: center;} /*弹性布局,不换行*/
.df-fwno{display:flex;flex-wrap:nowrap;}
/*每个项目两侧间隔相等。那么两个项目间的距离是间隔x2*/
.df-jcsa{display:flex;justify-content: space-around;}
/*两端对齐,第一个没左边距,最后一个没有右边距*/
.df-jcsb{display:flex;justify-content: space-between;}
.fw{flex-wrap: wrap} /* font-size */
.f16{font-size:1.6rem;}
.f50{font-size:5rem;}
/* percent width value */
.pct100{width:100%;}
.pct80{width:80%;}
.pct25{width:25%;}
.pct20{width:20%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
/* fixed width value */
.w280{width:280px;}
/*font-color*/
.co20B{color:#20B176;}
.co5fc{color:#5fc0cd;}
.cofff{color:#fff;}
.co000{color:#000;}
.bgfff{background:#fff;}
/* white-space */
.nowrap{white-space:nowrap;}
/* 单行文字溢出虚点显 示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} /*最大宽最大高*/
.ma-wh25{max-width: 2.5rem;max-height:2.5rem;}
.mi-h250{min-height: 25rem;}
.mb20{margin-bottom:2rem;}
/*投影*/
.drop-sb{filter:drop-shadow(5px 5px 10px black)} .cptdno{cursor: pointer;text-decoration:none;}

framework的代码

/* ---------------------框架设置----------------------- */
/*将html 和 body 元素的高度设置为100%,使其充满整个屏幕。*/
/*这里还要说明一下:html下的body一般会有或多或少的margin,body的高度不是100%的。*/
html{height:100%;width:100%;} /*将html 和 body 元素的高度设置为100%,使其充满整个屏幕。这里body:height:100%是继承html的高度*/
/*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/
body{display:flex;flex-direction:column;height:100%;width:100%;}
/*我们希望 header 和footer 只占用他们应该占用的空间,将剩余的空间全部交给主体内容区域*/ /*.g-header{flex:0 0 auto;}*/
header{flex:0 0 auto;}
/*将 flex-grow 设置为1,该元素会占用全部可使用空间*/
/*而其他元素该属性值为0,因此不会得到多余的空间*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
.g-content{flex: 1 0 auto;width:100%;background:whitesmoke;} /*.g-footer{flex: 0 0 auto;}*/
footer{flex: 0 0 auto;} /*此方法通过position固定在浏览器下方,但是以一种浮动在上层的效果出现的。*/
/*所以上一个紧挨的并列盒子,即g-content盒子的内容就会有一部分显示不全。被遮挡了。*/
/*而这种特性也被用于实现footer底层样式透明,footer里的按钮不透明。*/
/*而实现内容不遮挡,只要在g-content的底部新增一个含高度的空div就完成。*/
.g-footer-f{position: fixed;bottom:; width:100%;min-height: 5rem;} /*只要再给一个层,然后给个跟父盒子一样高的高度就可以实现底层透明,上层不透明*/
/*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;实现透明效果*/
.footer-bg{height:5rem;filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;} /* ---------------------具体的头部设置----------------------- */ .h-row-1{
min-height: 2rem;
line-height: 2rem;
}
.h-row-1 a{
color:#20B176;
}
.h-row-1 img{
max-width: 1rem;
margin:0 0.2rem;
} .h-row-2{
background:#20B176;
min-height:4rem;
line-height:4rem;
}
.h-row-2 a{
font-size:1.5rem;
color:#fff;
margin-left: 2.5rem;
} /* ---------------------具体的脚步设置----------------------- */ footer{
background:#20B176;
}
.f-row-2{
min-height: 2rem;
line-height: 2rem;
border-top:0.1rem solid #fff;
}
.f-row-2 span{
padding:0 0.2rem;
font-size:1rem;
color:#fff;
}
.f-row-2 span:nth-child(5){
padding-right:0.5rem;
border-right:0.1rem solid #fff;
} .f-row-1{
padding:1rem 0;
min-height: 11rem;
} .f-row-1 h5{
font-size: 1.5rem;
color:#fff;
}
.f-row-1 a{
padding:0 1rem;
color:#fff;
} .f-row-1 li{
display:inline-block;
} .f-cess-1,.f-cess-2,.f-cess-3{
position:relative;
margin:;
/*border:0.1rem solid #ff0000;*/
}
.f-cess-1{
width:30%;
}
.f-cess-2{
width:35%;
margin:0 1rem;
}
.f-cess-3{
width:30%;
text-align:right;
overflow: hidden; }
.f-cess-1 ul{
position: absolute;
bottom:-1rem;
left:;
/*border:0.1rem solid #ff0000;*/
}
.f-cess-2 ul{
position: absolute;
bottom:-1rem;
left:;
}
.f-cess-1 li{
margin:1rem .5rem 0 -1rem;
/*用于撑开链接的行高和去掉默认的左边10px间隙*/
}
.f-cess-2 li{
margin:1rem 1rem 0 -1rem;
}
.f-cess-1 li:first-child{
border-right:0.1rem solid #fff;
}
.f-cess-1 li:nth-child(2){
border-right:0.1rem solid #fff;
}
这只是自己的一点小穿插。回到test8
test8-1中,

1.盒子c-cell-1里要设置font-size:0来去掉子c-cell-2的inline-block里之间的间隙
2.c-cell-2的width设置为20%,均分5格。
3.box-shadow的使用
<div class="c-cell-1">
<div class="c-cell-2">
<a href=""><img src="img/test8-1/alibaba.jpg"> </a>
</div>
<div class="c-cell-2">
<a href=""><img src="img/test8-1/jinshanyun.jpg"> </a>
</div>
<div class="c-cell-2">
<a href=""><img src="img/test8-1/huanxin.jpg"> </a>
</div>
<div class="c-cell-2">
<a href=""><img src="img/test8-1/yuntongxun.png"> </a>
</div>
<div class="c-cell-2">
<a href=""><img src="img/test8-1/qiniu.jpg"> </a>
</div> </div>
.c-cell-1{
width:100%;
background:#fff;
overflow: hidden;
/*border:0.1rem solid #ff0000;*/
font-size:;
}
/*font-size: 0;用于去掉div之间的间隙*/
.c-cell-2{
display: inline-block;
width: 20%;
height: 12rem;
padding:0 1rem; }
.c-cell-2>a{
width:100%;
display: inline-block;
line-height: 12rem;
margin:;
padding:;
list-style-type: none;
/*border:0.1rem solid #ff0000;*/
}
.c-cell-2>a>img{
width:100%;
}
.c-cell-2:hover{
z-index:;
box-shadow: 0 0 20px lightgrey;
}

test8-1的实现已经没什么说的了。现在去到test8-2里

可以发现content里是左定宽,右边自适应的。

在平常的页面浏览里,经常发现编辑页面和系统页面都是运用到这种布局。

那么这么实现左定局,右自适应呢?

二。一边定局,一边自适应

方法1:左边float浮动

关键代码是

.left{float:left;width:准确数}
.right{width:不用设置}
当然还要设置clear:both;去掉浮动影响。
<div class="c-row-3">
<div class="pct80 auto">
<div class="left-cell">
</div>
<div class="right-cell">
</div>
<div class="c-row-4 cl"> .left-cell{
float:left;
width:20rem; }
.right-cell{
/*width:100%;*/
margin-left:30rem;
margin-right:; }

方法2:display:flex

父容器设置display:flex;right部分设置flex:1;剩下的空间自动伸展

关键代码是

.g-content{display:flex;}
.left{width:准确数}
.right{flex:1;}

方法3:左右都设置浮动+calc函数

此方法我一直留在自己的word文档中,还没使用过。日后在研究。

关键代码是

.left{float:left;}
.right{float:left;
  width: calc(100vw - 200px) ;
}

1. 浮动。(注意:为了不影响其他元素,别忘了在父级上清除浮动)

2. calc() = calc(四则运算) 用于在 css 中动态计算长度值,需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);

3. vw: viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,

同样的还有 vh: viewport height。1vw = viewport 高度的 1%, 100vh = viewport height。

浏览器支持情况: 主流浏览器、IE10+

vw 和 vh 会随着viewport 的变化而变化,因此十分适合于自适应场景来使用。

方法4:负margin

加多一个父盒子装right盒子,同时left最后设置

原理是left盒子附上去,遮挡right父盒子的margin-left

关键代码是

.g-content{}
.c-row-1{float:left;width:100%;}
.right{margin-left:200px;}
.left{float:left;margin-left:-100%;} <div class="c-row-1">
<div class="right"></div>
</div>
<div class="left"></div>
那么布局已经定了,接下来研究左cell的文字特效和对齐方式
对齐方式,我试了很多方法,都没有实现自适应中间+字体left效果。最后我直接定死宽度,使用
margin移动到我希望的地方。
超链接前的圆点。直接使用空白框+radius就可以实现了
hover伪元素实现鼠标放到链接上的效果
<div class="left-cell">
<h4 class="pct50 auto dib"><strong>合作企业</strong></h4>
<ul>
<li><div class="circle"></div><a href="">阿里巴巴</a></li>
<li><div class="circle"></div><a href="">腾讯视频</a></li>
<li><div class="circle"></div><a href="">土豆网</a></li>
<li><div class="circle"></div><a href="">北京葡萄藤</a></li>
<li><div class="circle"></div><a href="">阿里巴巴</a></li>
<li><div class="circle"></div><a href="">阿里巴巴</a></li>
<li><div class="circle"></div><a href="">腾讯视频</a></li>
<li><div class="circle"></div><a href="">土豆网</a></li>
<li><div class="circle"></div><a href="">北京葡萄藤</a></li>
<li><div class="circle"></div><a href="">阿里巴巴</a></li>
<li><div class="circle"></div><a href="">北京葡萄藤</a></li>
<li><div class="circle"></div><a href="">阿里巴巴</a></li>
</ul>
</div>
/*-----左cell-----*/

.left-cell{
float:left;
width:20rem;
background:#fff;
text-align: center;
margin-bottom:30px;
font-size:1.5rem;
border: 1px solid lightgrey;
border-radius: 1%;
box-shadow: 0 1px 2px lightgrey;
} .left-cell h4{
margin:;
width:100%;
height:4rem;
line-height:4rem;
border-bottom: 1px solid lightgrey;
}
.left-cell ul{
width:100%;
margin-bottom:;
padding:1.8rem 0;
}
.left-cell li{
width:50%;
margin-left:7rem;
margin-bottom:1.5rem;
text-align: left;
}
.left-cell li a{text-decoration:none;color:#20B176;} .circle{
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border: 1px solid orangered;
border-radius: 100%;
margin-right: 5px;
}
.left-cell li:hover div.circle{
background-color: #ffA500;
}
.left-cell li:hover a{
color:#ffA500;
}

。-_-!差不多下午5点了。要坐车到前山。约了妹子吃饭。总结么,没时间总结了。下次吧!

pc端的企业网站(IT修真院test8)详解1-3的更多相关文章

  1. pc端的企业网站(IT修真院test8)详解1-2

    今天接着说test8的页面还原. 头部header和尾部footer 我一开始是想直接使用bootstrap的栅格系统来实现的.但是内容的定位出了不少麻烦. 那么就索性用原生html+css来还原页面 ...

  2. pc端的企业网站(IT修真院test8)详解1-1

    这任务需求我们使用推特的前端框架bootstrap来实现.先放psd图. 上传这些图片也蛮大的.为此我使用office picture manager压缩了图片. 方法:alt+p+o,然后tab+下 ...

  3. pc端的企业网站(IT修真院test9)详解一个响应式完成的pc端项目

    一:引入bootstrap框架 昨天一直被bootstrap栅格系统折磨. why? 我本来想一边码字,一边学习栅格布局的.but不成功.这时我头脑已经昏了. 下午,我查看了bootstrap的官网, ...

  4. pc端的企业网站(IT修真院test8)详解1-4

    今天完成的事情:(1,伪元素:before,:after的使用.2.table的使用(collapse的使用)3rgba的高级运用) 今天我主要完成test8-3的页面. header和footer都 ...

  5. VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)

    步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...

  6. [转帖]PC虚拟化主流:KVM、XEN、OpenVZ详解

    PC虚拟化主流:KVM.XEN.OpenVZ详解 https://zhuanlan.zhihu.com/p/90920566 1.pc虚拟化——KVM KVM是完整的硬件虚拟化,可以在Windows ...

  7. 移动端开发touchstart,touchmove,touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  8. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  9. 全网最详细的PLSQL Developer + Oracle client的客户端 或者 PLSQL Developer + Oracle server服务端的下载与安装过程(图文详解)

    不多说,直接上干货! 环境说明: 本地没有安装Oracle服务端,oracle服务端64位,是远程连接,因此本地配置PLSQL Developer64位. Oracle database使用在本机部署 ...

随机推荐

  1. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  2. 【2017-06-06】Ajax完整结构、三级联动的制作

    一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...

  3. vue2入坑随记(二) -- 自定义动态组件

    学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...

  4. Python中如何调用Linux命令

    一.使用os模块 In [1]: import os #导入os模块 In [2]: os.system('ls') anaconda-ks.cfg epel-release-7-5.noarch.r ...

  5. .NET 随记

    1. goto 常用于 switch语句中2. 字符串相加用 StringBuilder的Append()方法性能好3. str.Trim(',') 清除字符串后的","4. st ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统(84)-Quartz 作业调度用法详解一

    前言 我从Quartz2.0开始使用,并对其进行了封装了界面,可以参考 http://www.cnblogs.com/ymnets/p/5065154.html 最近拿出来进行了优化,并升级到最新版, ...

  7. Angularjs在360兼容模式下取数据缓存问题解决办法

    测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重 ...

  8. jsp图片上传

    1.要实现图片上传,首先需要一个组件,这里我用的是smartupload.jar可以到这里下载http://download.csdn.net/detail/mengdecike/8279247 2. ...

  9. 【转载】The Elements of Programming Style之代码风格金科玉律

    原始日期: 2017-02-06 16:20 <The Elements of Programming Style >是一本很古老的书.尽管 Fortran 我们不太使用,尽管新奇的语言层 ...

  10. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...