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,一经查实,立即删除!

相关文章

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

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

label 标签里面元素点击事件

想做一个单击显示,单击消失的效果,两个元素都在label标签里面,通过打log发现,当点击消失的时候,先执行了消失的单击事件,有执行了出现的单击事件,所以元素并没有消失,这个出现的原因…

java contenttype_POST不同提交方式对应的Content-Type,及java服务器接收参数方式

简介:Content-Type(MediaType),即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息.参考response.Header里常见Content-Type一般有以下四种&…

Java 进程占用 VIRT 虚拟内存超高的问题研究

一、现象说明 最近发现线上机器java 7(openjdk)进程的 VIRT 虚拟内存使用达到了 50G,如下所示: PID    USER  PR NI VIRT  RES SHR S   %CPU   %MEM   TIME   COMMAND 3130   tomcat  20 0 9128m  1.4g 6544 S…

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

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

聊聊一直困扰前端程序员的浏览器兼容-【css】

1.为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,让CSS应用…

权限提升

UACMe – Defeat Windows User Account Control (UAC) https://github.com/hfiref0x/UACME MiniHook Lib project https://github.com/TsudaKageyu/minhook CrackMapExec – Active Directory Post-Exploitation Tool https://www.darknet.org.uk/2017/07/crackmapexec-active-…

java getrealpath_JavaEE路径陷阱之getRealPath

绝对不要使用ServletContext的getRealPath方法获取Web应用的路径!应该使用ServletContext的getResource()方法,直接使用相对于Web应用根目录的相对路径来获取资源。ServletContext接口中定位资源的方法getResourcejava.net.URL getResource(java.lang.St…

与客户患难与共

在採訪Werner Vogels(亚马逊的首席技术官)的过程中,他描写叙述了亚马逊的开发者是怎样跟他们的用户保持沟通的:记住。我们的大部分开发者都跟客户保持着良好的接触,因此他们对“客户喜欢什么”、“客户不喜欢什么”、“…

Camel 2.11 –没有Spring的Camel Web应用程序

在撰写本文时,我们刚刚向即将到来的Apache Camel 2.11添加了一个新组件,该组件允许使用Camel运行Web应用程序,而不必依赖Spring Framework来加速Camel。 或与此相关的任何其他第三方框架。 有点as愧地说,在2013年,我们…

关于盒模型的一点总结

标准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 …

java 反射机制性能_Java反射机制的用途和缺点

Java反射机制的用途和缺点反射的用途 Uses of ReflectionReflection is commonly used by programs which require the ability toexamine or modify theruntime behavior of applications running in the Java virtual machine. Thisis a relatively advancedfeature and shou…

最近的生活

这个暑假主要时间都在公司实习,没有去自己学习很新的一些技术,因为现在这个公司的技术栈不是特别的新,不过实习了一段时间发现,其实技术栈新不新和你一个新手根本就没有半毛钱关系,根基不牢学什么白搭是吧 举个例子&am…

将大型项目从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>"红色部分代…

java生成带文字的图片_Java在背景图片上面加文字或者文字自动生成图片

正巧遇到一个项目需要图片合成&#xff0c;查阅了网上许多资料之后整理了一份生成图片的工具类&#xff0c;代码如下&#xff1a;package org.yygzs.acker.util;import java.io.IOException;import javax.imageio.ImageIO;import java.io.File;import java.awt.Font;import jav…

style对象的cssText方法

cssText 本质是什么&#xff1f; cssText 的本质就是设置 HTML 元素的 style 属性值。 cssText 怎么用&#xff1f; domElement.style.cssText "color:red; font-size:13px;"; cssText 返回值是什么&#xff1f; 在某些浏览器中&#xff08;比如 Chrome&#xff09…

Spring的Web MVC –重定向到内存泄漏

他们说一块岩石会引起雪崩。 最近&#xff0c;我的一位同事Marcin Radoszewski给了我一块岩石。 您可能永远都不会猜测它是什么&#xff0c;但是有机会在许多Web应用程序中使用它。 请允许我向您介绍这块石头。 您可能很清楚发布模式后的重定向 。 使用Spring Framework&#…