前端之CSS：CSS补充
css样式之补充。。。
css常用的一些属性：
1.去掉下划线 ：text-decoration:none ;
2.加上下划线： text-decoration: underline;
3.调整文本和图片的位置（也就是设置元素的垂直对齐方式）：vertical-align:-20px;
没设置之前：
设置之后：
3.外边距：margin
4.内边距：padding
5.居中；margin 0 auto;(只是针对盒子居中)
6内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签。。
1.将内联标签转换成块级标签：display:block;
2.将块级标签转换成内联标签：display:inline;
3.块级内联标签：display；inline-block;
块级内联标签可以像块级一样可设长宽，也可像内联一样在一行显示
6.隐藏的两个方法：display:none; #隐藏了会顶上去
visibility :hidden; #隐藏了不会顶上去
7.隐藏溢出的两个方法：overflow :auto;
overflow :scoll; #带滚动条
8.文本水平居中：text-align:center;
文本垂直居中：line-height;
9.伪类；
1.没访问之前： a:link{color:red;}
2.鼠标悬浮时： a:hover{color:green;}
3.访问过后： a:visited{color:yellow;}
4.鼠标点击时 a:active{color:blue;}
5.在p标签属性为c2的后面加上内容
p.c2:after{
content:'hello';
color:red;
}
6.在p标签属性为c2的钱面加上内容
p.c2:before{
content:'啦啦啦';
color:red;
}
10.position的四种属性
1.static：默认位置
2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
3.relative:相对定位(参照的是自己本身的位置)，没有脱离文档流，没有顶上去，会保持自己的位置不动。可以使用top left进行定位
4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位，如果找不到会按body的去找）
注意！！：将定位标签设置为absolute，将他的父级标签设置为定位标签 （relative）
11.float和position的区别
float：半脱离文档流
position：全脱离文档流
12.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
13.透明度：opacity:0.4;
14.边框弧度：border-radius: 50%;
15.去除列表前面的标志：list-style:none;
16.对齐上面和左边最顶部：padding:0; margin:0;
17.字体加粗样式： font-weight: 900;
18.需要注意的几个逻辑表达式的问题，下面的这个和js的&&，||用法是一样的
print(3 and 5) #两个为真才为真
print(0 and 3) #0是假就不判断后面了，直接成假了
print(0 or 3) #有一个为真就为真
print(2 or 3) #2已经为真了那么就不会去判断后面了
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 padding:0;
9 margin: 0;
10 }
11 .outer{
12 width:790px;
13 height: 340px;
14 border: solid 1px red;
15 margin: 0 auto;
16 margin-top: 40px;
17 position: relative;
18 }
19 ul{
20 list-style: none;
21 position: absolute;
22 top: 0;
23 left:0;
24 }
25 .com{
26 position: absolute;
27 display: none;
28 /*visibility: hidden;*/
29 }
30 .num{
31 position: absolute;
32 top: 300px;
33 left: 330px;
34 }
35 .num li{
36 display: inline-block;
37 width: 20px;
38 height: 20px;
39 color: black;
40 background-color: white;
41 border-radius: 50%; //边框弧度
42 line-height: 20px;
43 text-align: center;
44 }
45 .btn{
46 position: absolute;
47 width: 40px;
48 height: 60px;
49 background-color: grey;
50 opacity: 0.5; //透明度
51 color: black;
52 font-weight: 900; //加粗
53 text-align: center;
54 line-height: 60px;
55 top:50%;
56 margin-top: -30px;
57 }
58 .leftbtn{
59 left:0;
60 }
61 .rightbtn{
62 right:0;
63
64 }
65 </style>
66 </head>
67 <body>
68 <div class="outer">
69 <ul class="img">
70 <li><a href=""><img src="1.jpg" alt=""></a></li>
71 <li class="com"><a href=""><img src="2.jpg" alt=""></a></li>
72 <li class="com"><a href=""><img src="3.jpg" alt=""></a></li>
73 <li class="com"><a href=""><img src="4.jpg" alt=""></a></li>
74 <li class="com"><a href=""><img src="5.jpg" alt=""></a></li>
75 <li class="com"><a href=""><img src="6.jpg" alt=""></a></li>
76 </ul>
77 <ul class="num">
78 <li></li>
79 <li></li>
80 <li></li>
81 <li></li>
82 <li></li>
83 </ul>
84 <div class="leftbtn btn"> < </div>
85 <div class="rightbtn btn"> > </div>
86
87 </div>
88
89 </body>
90 </html>
实现图片切换的效果
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>后台管理布局</title>
6 <style>
7 *{
8 margin: 0;
9 }
10 a{
11 text-decoration: none;
12 }
13 .header{
14 width: 100%;
15 height: 44px;
16 background-color: #2459a2;
17 }
18 .title li{
19 width: 100px;
20 height: 80px;
21 list-style: none;
22 text-align: center;
23 line-height: 80px;
24 margin-top: 20px;
25 padding: 50px;
26 background-color: blue;
27 }
28 .leftmenu .title a{
29 font-size: 18px;
30 color: white;
31 }
32 .leftmenu{
33 width: 300px;
34 background-color: grey;
35 position: fixed;
36 top: 44px;
37 left:0;
38 bottom: 0;
39 }
40 .con{
41 position: fixed;
42 top: 44px;
43 left: 300px;
44 right:0;
45 bottom: 0;
46 background-color: darksalmon;
47 overflow: scroll;
48 }
49
50 </style>
51 </head>
52 <body>
53 <div class="header"></div>
54 <div class="content">
55 <div class="leftmenu">
56 <ul class="title">
57 <li><a href="">菜单一</a></li>
58 <li><a href="">菜单二</a></li>
59 <li><a href="">菜单三</a></li>
60 </ul>
61 </div>
62 <div class="con">
63 <h1>海啊</h1>
64 <h1>海啊</h1>
65 <h1>海啊</h1>
66 <h1>海啊</h1>
67 <h1>海啊</h1>
68 <h1>海啊</h1>
69 <h1>海啊</h1>
70 <h1>海啊</h1>
71 <h1>海啊</h1>
72 <h1>海啊</h1>
73 <h1>海啊</h1>
74 <h1>海啊</h1>
75 <h1>海啊</h1>
76 <h1>海啊</h1>
77 <h1>海啊</h1>
78 <h1>海啊</h1>
79 <h1>海啊</h1>
80 <h1>海啊</h1>
81 <h1>海啊</h1>
82 <h1>海啊</h1>
83 <h1>海啊</h1>
84 <h1>海啊</h1>
85 <h1>海啊</h1>
86 <h1>海啊</h1>
87 <h1>海啊</h1>
88 <h1>海啊</h1>
89 <h1>海啊</h1>
90 <h1>海啊</h1>
91 <h1>海啊</h1>
92 <h1>海啊</h1>
93 <h1>海啊</h1>
94 <h1>海啊</h1>
95 <h1>海啊</h1>
96 <h1>海啊</h1>
97 <h1>海啊</h1>
98 <h1>海啊</h1>
99 <h1>海啊</h1>
100 <h1>海啊</h1>
101 <h1>海啊</h1>
102 <h1>海啊</h1>
103 <h1>海啊</h1>
104 <h1>海啊</h1>
105 <h1>海啊</h1>
106 <h1>海啊</h1>
107 <h1>海啊</h1>
108 <h1>海啊</h1>
109 <h1>海啊</h1>
110 <h1>海啊</h1>
111 <h1>海啊</h1>
112 <h1>海啊</h1>
113 <h1>海啊</h1>
114 <h1>海啊</h1>
115 <h1>海啊</h1>
116 <h1>海啊</h1>
117 <h1>海啊</h1>
118 </div>
119 </div>
120 </body>
121 </html>
后台管理布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>遮罩层</title>
6 <style>
7 .backgroup{
8 width: 100%;
9 height: 2000px;
10 }
11 .zzc{
12 position: fixed;
13 bottom: 0;
14 top:0;
15 left:0;
16 right:0;
17 background-color: grey;
18 opacity: 0.4;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="backgroup">
24 <p>haiyan</p>
25 <p>haiyan</p>
26 <p>haiyan</p>
27 <p>haiyan</p>
28 <p>haiyan</p>
29 <p>haiyan</p>
30 <p>haiyan</p>
31 <p>haiyan</p>
32 <p>haiyan</p>
33 <p>haiyan</p>
34 <p>haiyan</p>
35 <p>haiyan</p>
36 <p>haiyan</p>
37 </div>
38 <div class="zzc"></div>
39 </body>
40 </html>
遮盖层
前端之CSS：CSS补充的更多相关文章
- 前端html与css学习笔记总结篇(超详细)
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)
品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 第八十五节，css布局补充一
css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin: ...
- 前端笔记之CSS（上）
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- 前端零基础 --css转换--skew斜切变形 transfor 3d
前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急
随机推荐
- 微博获取原图时重定向到图片的url
微博获取原图时重定向到图片的url,所以获取的是乱码 jsoup默认是执行重定向的. //根据Url获取页面对应的Document public static Document getDoc1(Str ...
- Delphi IDE使用的一些主要技巧
Delphi IDE使用的一些主要技巧 1.查找和替换 (1)<ctrl>+F[1]:选择页“Find”,进行查找,则根据查找方向继续查找.选择页“Findin Files”,则进行该工程 ...
- 【Struts2】工作流程
转发两篇文章 一个请求在Struts2框架中的处理分为以下几个步骤: 1.客户端发出一个指向servlet容器的请求(tomcat): 2.这个请求会经过图中的几个过滤器,最后会到达FilterDis ...
- C 语言中的关键字 - 数据类型、数据修饰符及逻辑结构
C 语言中有 32 个关键字.这是留个编译器用的特殊字符串,用户不可以使用. 特殊关键字 sizeof 和 return 是 C 语言中的两个特殊关键字. sizeof sizeof 用于计算变量所占 ...
- ARTS-1
ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...
- SpringBoot项目快速启动停止脚本
SpringBoot项目快速启动停止脚本 1.在jar包同级目录下,创建 app.sh #!/bin/bash appName=`ls|grep .jar$` if [ -z $appName ] t ...
- 获取客户机MAC地址 根据IP地址 获取机器的MAC地址 / 获取真实Ip地址
[DllImport("Iphlpapi.dll")] private static extern int SendARP(Int32 dest, Int32 host, ref ...
- JS之理解继承
JS之理解继承:https://segmentfault.com/a/1190000010468293 1.call继承,也叫借用构造函数.伪造对象或是经典继承.call继承回把父类的私有属性和方法继 ...
- 【错误】jsp查询字符串中空格导致的异常问题！
jsp中查询字符串中空格问题 jsp中查询字符串中参数名的等号右边最好不要出现空格,因为编译器会把他当做是参数值得一部分. 例如: <a href="adjust.jsp?number ...
- ubuntu 配置 tftp 服务器
一. 安装 tftp 1.1. 安装 tftp 所需的软件. a. 安装 tftp-hpa,tftpd-hpa,前者是客户端,后者是服务程序, 在终端下输入 sudo apt-get install ...