pc端的企业网站(IT修真院test8)详解1-3
一,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的更多相关文章
- pc端的企业网站(IT修真院test8)详解1-2
今天接着说test8的页面还原. 头部header和尾部footer 我一开始是想直接使用bootstrap的栅格系统来实现的.但是内容的定位出了不少麻烦. 那么就索性用原生html+css来还原页面 ...
- pc端的企业网站(IT修真院test8)详解1-1
这任务需求我们使用推特的前端框架bootstrap来实现.先放psd图. 上传这些图片也蛮大的.为此我使用office picture manager压缩了图片. 方法:alt+p+o,然后tab+下 ...
- pc端的企业网站(IT修真院test9)详解一个响应式完成的pc端项目
一:引入bootstrap框架 昨天一直被bootstrap栅格系统折磨. why? 我本来想一边码字,一边学习栅格布局的.but不成功.这时我头脑已经昏了. 下午,我查看了bootstrap的官网, ...
- pc端的企业网站(IT修真院test8)详解1-4
今天完成的事情:(1,伪元素:before,:after的使用.2.table的使用(collapse的使用)3rgba的高级运用) 今天我主要完成test8-3的页面. header和footer都 ...
- VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)
步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...
- [转帖]PC虚拟化主流:KVM、XEN、OpenVZ详解
PC虚拟化主流:KVM.XEN.OpenVZ详解 https://zhuanlan.zhihu.com/p/90920566 1.pc虚拟化——KVM KVM是完整的硬件虚拟化,可以在Windows ...
- 移动端开发touchstart,touchmove,touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 全网最详细的PLSQL Developer + Oracle client的客户端 或者 PLSQL Developer + Oracle server服务端的下载与安装过程(图文详解)
不多说,直接上干货! 环境说明: 本地没有安装Oracle服务端,oracle服务端64位,是远程连接,因此本地配置PLSQL Developer64位. Oracle database使用在本机部署 ...
随机推荐
- Python有哪些好用的语言翻译方法
最近有个需求,要将几万条数据从日语翻译成中文.因为数据的获取和处理用的是python代码,所以想先尝试翻译部分也用python实现. 目前网上查到的翻译方法有百度.有道云以及谷歌翻译,下面会对这三个方 ...
- JDBC连接数据库程序
废话少说,看了尚学堂的视频以及某大神的博客,总结出以下.(本文以oracle数据库为例) 创建一个JDBC连接数据库的程序,需要着手做以下几件事情: 注意,这里边使用了java.sql.Stateme ...
- SQLalchemy模块用法
安装 pip install sqlalchemy #!/usr/bin/env python # -*- coding:utf-8 -*- # 加载模块 from sqlalchemy.ext.de ...
- Coursera 机器学习笔记(八)
主要为第十周内容:大规模机器学习.案例.总结 (一)随机梯度下降法 如果有一个大规模的训练集,普通的批量梯度下降法需要计算整个训练集的误差的平方和,如果学习方法需要迭代20次,这已经是非常大的计算代价 ...
- 刨根究底字符编码之十三——UTF-16编码方式
UTF-16编码方式 1. UTF-16编码方式源于UCS-2(Universal Character Set coded in 2 octets.2-byte Universal Character ...
- 用GAN生成二维样本的小例子
同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/27343585 本文完整代码地址:Generative Adversarial Networks (GANs) with ...
- angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件
时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...
- 发布.net mvc遇到的HTTP错误 403.14-Forbidden解决办法
请检查一下"处理程序映射",里面是否有"ExtensionlessUrlHandler-Integrated-4.0",如果没有,请注册.net4.0 在运行里 ...
- Java 基础 程序流程控制 (下)
Java 程序流程控制 (下) 此篇单独对循环结构的知识点进行整理: 之前讲到循环结构分为:for循环,while循环,do...while循环三种最基本的循环结构:在JDK1.5以后的版本还提供了f ...
- php中curl远程调用获取数据
$jump_url=$this->_post('locations'); $url=htmlspecialchars_decode($jump_url); $ch = curl_init(); ...