css小随笔(二)与通用样式

51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例

  这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟css的标签,所以在没有接触通用样式之前很可能就是这两个板块就是两个不同的代码了,然后就会导致css文件里面的代码会非常的多,也会是比较混乱的,不能够清楚明了的看懂。而且应用的通用样式就是可以用一套代码来搞定各个类似板块,并且每个板块不同的地方仅仅需要微调就可以了。这样不仅仅使代码明了,而且还会很省事,也会减少工作量。

   这个就是上面两个板块所对应的css通用样式代码

.strong{font-size: 16px;line-height: 16px;color: #181818;
}
.p{height: 20px;font-size: 12px;line-height: 20px;float: left;width: 50%;color: #686868;overflow: hidden;
}
.span{font-size: 12px;color: white;padding: 1px 4px;background-color: #FF4A7D;float: left;margin-left: -80px;margin-top: 20px;
}
/*享品质与逛商场里的文字*/
.span1{font-size: 12px;color: white;padding: 1px 4px;background-color: #952DFF;float: left;margin-left: -80px;margin-top: 20px;
}
.span2{font-size: 12px;color: white;padding: 1px 4px;background-color: #0072F2;float: left;margin-left: -80px;margin-top: 20px;
}
.s1{font-size: 12px;color: white;padding: 1px 4px;background-color: #FF4A7D;float: left;/*margin-left: -80px;*/margin-top: 20px;position: absolute;bottom: 10px;z-index: 1;left: 10px;
}
.s2{font-size: 12px;color: white;padding: 1px 4px;background-color: #952DFF;float: left;/*margin-left: -80px;*/margin-top: 20px;position: absolute;bottom: 10px;z-index: 1;left: 10px;
}
.s3{font-size: 12px;color: white;padding: 1px 4px;background-color: #0072F2;float: left;/*margin-left: -80px;*/margin-top: 20px;position: absolute;bottom: 10px;z-index: 1;left: 10px;
}
.row{width: 100%;background-color: white;border-bottom: 1px solid #F7F7F7;overflow: hidden;
}
.row .col2{float: left;width: 50%;border-right: 1px solid #F7F7F7;padding: 10px;overflow: hidden;}
.row .col2 img{width: 50%;float: right;/*margin-top: -27px;*/
}
.row .col4{float: left;width: 25%;border-right: 1px solid #F7F7F7;padding: 10px;overflow: hidden;position: relative;
}
.row .col4 .p{width: 90%;
}
.row .col4 img{width: 95%;
}

 像这个也是

.sp3{border: 1px solid #E7E7E7;color: #686868;float: right;margin: 5px;width: 50px;height: 25px;padding: 3px 3px;
}
.sp2{height: 20px;font-size: 12px;line-height: 20px;float: left;width: 50%;color: #686868;overflow: hidden;
}
.sp1{font-size: 12px;color: #181818;padding: 1px 4px;float: left;}
.d2{width: 100%;background-color: white;border: 1px solid #F7F7F7;overflow: hidden;
}
.d2 .dd{width: 50%;float: left;border: 1px solid #F7F7F7;
}
.d2 .dd p{color: #F23030;font-size: 17px;
}
.d2 .dd img{width: 90%;float: left;
}

通用样式不仅仅在手机站上应用,在电脑站跟响应式上面同样适用

星巴克的网站:像下面的图片跟文字就可以用

#jingxuan .jingxuan .tu{width: 100%;/*height: 310px;*/display: flex;justify-content: center;flex-wrap: wrap;
}
#jingxuan .jingxuan .tu img{width: 240px;height: 160px;
}
#jingxuan .jingxuan .tu div{width: 240px;height: 280px;margin: 15px;/*background-color: #fff;*/box-shadow:0 0px 2px #ccc ;font-weight: 400;
}
#jingxuan .jingxuan .tu .p3{line-height: 28px;text-align: center;font-size: 18px;margin-top: 15px;color: #2F2F2F;font-weight: 700;
}
#jingxuan .jingxuan .tu .p4{line-height: 28px;text-align: center;font-size: 14px;margin-bottom: 14px;color: #707175;/*font-weight: 700;*/
}
#jingxuan .jingxuan .tu div:hover{box-shadow:0  1px 5px #ccc;
}
#jingxuan .jingxuan .tu div:hover p{color: #A98E67;
}

 

css小随笔(二)

 一、CSS伪类选择器

  1、写法:伪类选择器,在选择器后面,用:分隔,紧接伪类选择器状态;(权重:10

    

2、超链接的伪类状态:

:link ——未访问状态 :visited——已访问状态

:hover——鼠标指上去状态 :active——激活选定状态(鼠标点下未松开)

注意:当超链接多种伪类状态同时存在时,必须按照link-visited-hover-active的顺序,否则会导致部分选择器不生效

    

 

  3input的伪类状态

:hover :focus——获得焦点状态 :active

注意input的多种状态同时存在时,必须按上面的顺序

  4、其他标签,基本只用:hover事件

二、css盒模型

  1margin:外边距

只写一个值:表示四周的外边距均为指定值

写两个值:表示第一个数为上下外边距,第二个数为左右外边距

写三个值:分别表示上右下三个方向,左边默认等于右边

写四个值:表示上右下左四条边顺时针方向;

margin:0 autou: 设置块级元素,在父容器中水平居中!!!!

    

  2padding:内边距

设置方式与margin完全相同

注意:设置padding,将会导致div区域被撑大!!!!

使用时必须注意div实际的宽高为多少!!!

  3border:边框

设置边框需要三个属性:宽度 样式 颜色

原则上,三个属性缺一不可,顺序可以随意颠倒

可以使用toprightbottomleft分别设置四个边

     

    

  4、当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子与父盒子的上边线并不总能分开, 而是会导致,两个盒子同时下来。

     

【解决办法】

给父盒子添加padding-top;不推荐使用,会导致父盒子结构多余1px padding

给父盒子添加1pxborder-top;同样会导致1px的多余空间,不推荐使用

给父盒子与子盒子添加浮动;可能会由于浮动一定程度的影响页面布局

     

给父盒子添加overflow属性;推荐使用的方式

     

5border-radius   圆角

①border-radius可以接受8个属性值,分别表示:

X轴(左上 右上 右下 左下)

Y轴(左上 右上 右下 左下)

egborder-radius10px 20px 30px 40px/10px 20px 30px 40px;

缩写形式:

只写x轴,Y轴默认等于X

四个角写不全,默认对角相等

只写一个值,默认8个属性全相等

egborder-radius10px 20px;=border-radius10px 20px 10px 20px;

=border-radius10px 20px 10px 20px/10px 20px 10px 20px;

    

当圆角弧度>=正方形边长的一半,江湖显示圆形

    

6border-image· 图片边框

①border-image一共可以放是个属性值

a、图片路径: url()

b、图片的切片宽度:四个值,分别代表上右下左四条边;

通过四条切线切割后,可以将图片分为九宫格。9宫格四个角分别对应边框的四个角(不会进行任何拉伸),9宫格四个边分别对应四条边框(会根据设置进行拉伸/平铺/重复等操作)

注意:写的时候不能带px单位

c、边框的宽度,四个值,分别代表上右下左四条边的宽度

注意:写的时候必须带px单位,与切片宽度用/分隔

d、边框的重复方式:stretch(拉伸)、round(铺满)、repeat(重复)

roundrepeat的区别】

round:会对四条边进行适当的拉伸压缩,确保四条边以正数重复

repeat:会保持每条边的宽度成都比例不变,

  可能导致四角处无法显示一条完整的边

     

    

    

属性值写法:border-imageab/cpx d;

③border-imagewebkit内核中的浏览器中,必须带-webkit-前缀

  7box-shadow:盒子阴影

①6个属性值,空格分隔

aX轴阴影距离(必选):可正可负,正右左负

bY轴阴影距离(必选):可正可负,正下左上

c、阴影模糊半径(可选值):只能是正数,默认为0,数值越大,阴影越模糊

d、阴影的扩展半径(可选值):可正可负,默认为0

数值越大,阴影扩大;数值越小,阴影越小

e、阴影颜色(可选值):默认为黑色

    

      f、内外阴影(可选):默认为外阴影,inset为内阴影(没有outset,默认就是)

    

      outline 外围线:显示在border外面,并且不会占用空间,可能会覆盖四周内容

      egoutline: 20px solid red;  

转载于:https://www.cnblogs.com/junwuyao/p/7349612.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

增加堆大小–谨防眼镜蛇效应

“眼镜蛇效应”一词源于英国殖民印度统治英国时所产生的轶事。 英国政府担心毒蛇眼镜蛇的数量。 因此,政府对每条死蛇给予悬赏。 最初,这是一个成功的策略,因为大量蛇被杀死以获取奖励。 最终,印度人开始养殖眼镜蛇以赚取收入。 …

如何创建可扩展的Java应用程序

开放的扩展使许多应用程序受益。 这篇文章描述了两种在Java中实现这种可扩展性的方法。 可扩展的应用 可扩展应用程序是可以扩展其功能而不必重新编译它们 ,有时甚至不必重新启动它们的应用程序。 只需将jar添加到类路径中,或通过更复杂的安装过程来实现…

关于盒模型的一点总结

标准w3c盒模型图示 关于怪异盒模型和标准盒模型的对比 关于怪异盒模型盒标准盒模型之间的转换

Day 9 函数的初识1

def my_len(): l1 [1,2,3,5,6] print(111) print(222) return print(333)print(my_len())一、函数的定义1.遇到return ,此函数结束,if 不在向下进行:2.return 的返回值 1. 不写return 返回为none 2. return non ,和1 …

将大型项目从Ant迁移到Maven

事实是,我们处在艰难时期。 我们花了将近三个月的时间将构建机制从Ant迁移到Maven 。 如果您打算在大型项目中做同样的事情,那就是您必须安排的最短时间。 我们仍在努力解决这种迁移带来的一些附带影响,但幸运的是,它们并不是那么…

移动端布局方案探究

研究了淘宝,天猫和网易彩票163的wap主页样式布局,总结移动端布局方案 注意:代码运行是file协议,在chrome里不支持引用本地文件,会提示跨域错误,可以用firefox或者Safari打开 当时做的ppt下载: 2015年12月移…

搭建springboot环境

1.前戏准备: SpringBoot核心jar包:这里直接从Spring官网下载了1.5.9版本. jdk:jdk1.8.0_45. maven项目管理工具:3.5版本. tomcat:8.5版本. 本地仓库:注意settings.xml里面的设置"<localRepository>E:/SpringBoot/repository</localRepository>"红色部分代…

.Net Core 2.0 生态(1).NET Standard 2.0 特性介绍和使用指南

.NET Standard 2.0 发布日期&#xff1a;2017年8月14日公告原文地址 前言 早上起来.NET社区沸腾了&#xff0c;期待已久的.NET Core 2.0终于发布&#xff01;根据个人经验&#xff0c;微软的产品一般在2.0时会趋于成熟&#xff0c;所以一个新的.Net开发时代已经来临&#xff01…

jquery中的创建节点和添加节点的方法

今天来说一下针对jquary关于创建节点和添加节点的方法&#xff0c;先来看看创建节点&#xff1a; 1、直接添加节点内容即可 $("div").append(<a href"http://www.baidu.com">百度一下</a>); 2、可以创建jquary对象添加进去 var $li$(<a hre…

移动端 fixed 固定按钮在屏幕下方,然后按钮被键盘顶上来...顶上来了有没有~

在移动端 H5 页面开发中&#xff0c;我使用了 fixed 固定某个元素在屏幕的最下方&#xff0c; 这时点击输入框&#xff0c;接着非常非常自然地出现了元素被系统键盘顶起来的情况&#xff0c;如下图。 解决方案: 首先&#xff0c;给页面最外层包裹一层 div(相对定位) &#xf…

momentum公式

momentum对于w的更新公式&#xff1a; http://caffe.berkeleyvision.org/tutorial/solver.html转载于:https://www.cnblogs.com/ymjyqsx/p/7364743.html

带弹簧的Hazelcast分布式执行

ExecutorService功能是Java 5附带的&#xff0c;位于java.util.concurrent包中。 它扩展了Executor接口&#xff0c;并提供了线程池功能来执行异步简短任务。 建议使用Java Executor服务类型来查看基本的ExecutorService实现。 此外&#xff0c;ThreadPoolExecutor是ExecutorS…

Manacher's Algorithm 马拉车算法(最长回文串)

这个马拉车算法Manacher‘s Algorithm是用来查找一个字符串的最长回文子串的线性方法&#xff0c;由一个叫Manacher的人在1975年发明的&#xff0c;这个方法的最大贡献是在于将时间复杂度提升到了线性&#xff0c;这是非常了不起的。对于回文串想必大家都不陌生&#xff0c;就是…

java咖啡机故障5_【咖啡小常识】咖啡机不得不知道的常见故障及解决方法

原标题&#xff1a;【咖啡小常识】咖啡机不得不知道的常见故障及解决方法咖啡行业交流请加私人微信精品咖啡香&#xff0c;微信号&#xff1a;(长按复制)thinkingcapacity一&#xff0e;没有蒸汽或做出的咖啡不热可能原因1、在一个时间段放出了大量的热水(不建议使用咖啡机自带…

idiom的学习笔记(一)、三栏布局

三栏布局左右固定&#xff0c;中间自适应是网页中常用到的&#xff0c;实现这种布局的方式有很多种&#xff0c;这里我主要写五种。他们分别是浮动、定位、表格、flexBox、网格。 在这里也感谢一些老师在网上发的免费教程&#xff0c;使我们学习起来更方便&#xff01;&#x…

USB之HID类Set_Report Request[调试手记1]

请翻开《Device Class Definition for Human Interface Devices (HID) Version 1.11 》7.2.2 Set_Report Request 现在我们先那键盘来做实验来观察。[备注:测试当时NUM指示灯亮] 通过笔记本上按“capslock”按键来观察外置键盘上大小写的指示灯。 通过USBlyzer观察到 发送03的…

Devoxx 2012:Java 8 Lambda和并行性,第1部分

总览 Devoxx是世界上最大的独立于供应商的Java会议&#xff0c;于11月12日至16日在比利时的Atwerp举行。 今年规模更大了&#xff0c;来自40个不同国家的3400名与会者。 和去年一样 &#xff0c;我和来自SAP的一小群同事都来了&#xff0c;并享受了很多。 在Nao机器人令人印象…

前端常见的十七个框架

本文作者祈澈姑娘&#xff0c;转载请声明 前端的技术日渐更新&#xff0c;最近得空&#xff0c;花了一上午的时间&#xff0c;将前端常见的框架总结了一下&#xff0c;在开发的过程之中&#xff0c;有了这些&#xff0c;不断能够提高自己的工作效率&#xff0c;还可以在工作之余…

Cesium调用Geoserver发布的 WMS、WFS服务

1 GeoServer服务发布 1.1 WMS服务 下载GeoServer安装版安装&#xff0c;同时安装geopackage扩展&#xff0c;以备使用。使用XX地图下载器下载地图&#xff0c;导出成GeoPackage地图文件。 &#xff08;1&#xff09;下载 GeoPackage DEM数据 &#xff08;2&#xff09;打开GeoS…

如何用ThreadLocals射击自己

它将很好地启动。 像大多数故事一样。 您会发现一个新概念&#xff0c;并对其功能感到惊讶。 然后突然装备了这把新锤子&#xff0c;一切开始看起来像钉子。 根据我们过去几个月的经验&#xff0c; java.lang.ThreadLocal真是一锤定音。 我想这全都归结为ThreadLocal的工作原理…