前端学习：学习笔记（CSS部分）
前端学习：学习笔记（CSS部分）
CSS的引入方式和书写规范
CSS的插入方式_内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!-- 插入CSS代码的第1种方式: 内嵌形式 -->
<div style="height: 300px;width: 300px;background-color: red;">
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div> </body> </html>
CSS的插入方式_内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
color: yellow;
}
</style>
</head> <body>
<!-- 插入CSS代码的第2种方式: 内部形式 -->
<div>
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div> </body> </html>
CSS的插入方式_外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Demo1.css" />
</head> <body>
<!-- 插入CSS代码的第3种方式: 外部形式 -->
<div>
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div>
</body> </html>
Demo01.css
div{
height: 500px;
width: 500px;
background-color: #FFFF00;
color: black;
}
CSS选择器
CSS标签选择器
<head>
<meta charset="utf-8" />
<title></title>
<!--
选择器的作用: 根据我们的项目需要,找到我们需要找到的某一些标签 选择器{
属性:属性值; ==>键值对
属性:属性值;
属性:属性值;
属性:属性值;
}
-->
<style>
div{
height: 300px;
width: 300px;
background-color: red;
} </style>
</head> <body>
<div><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
CSSid选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 400px;
width: 400px;
background-color: blue;
color: red;
}
</style>
</head>
<body>
<div id="d1"><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
CSS类选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clazz{
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head> <body>
<div class='clazz'><h1>DIV1</h1></div>
<div class='clazz'><h1>DIV2</h1></div>
<div class='clazz'><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
同时使用多个选择器的情况
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: black;
} .clazz{
background-color: yellow;
} #d1{
background-color: red;
} </style>
</head> <body>
<div id="d1" class="clazz"><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
同时使用三种方式插入CSS代码
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 200px;
width: 200px;
background-color: blue;
}
</style>
<link rel="stylesheet" href="css/Demo05.css" />
</head> <body>
<div style="height: 100px;width: 100px;background-color: red;"><h1>DIV1</h1></div>
</body>
同时使用三种方式插入CSS代码.css
div{
height: 300px;
width: 300px;
background-color: yellowgreen;
}
属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
margin-bottom: 10px;
color: red;
} div[align="left"]{
background-color: yellow;
}
div[align="right"]{
background-color: blue;
} </style>
</head> <body>
<div align="left">DIV1</div>
<div align="left">DIV2</div>
<div align="right">DIV3</div>
<div align="right">DIV4</div>
<div align="right">DIV5</div> </body>
伪元素选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
a:link{
color: yellowgreen;
}
a:hover{
color: black;
text-decoration: underline;
}
a:active{
color: darkgray;
}
a:visited{
color: darkblue;
}
</style>
</head> <body>
<h1>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="http://www.baidu.com">百度一下</a><br>
</h1>
</body>
层级选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1 a{
color: red;
} </style>
</head>
<body>
<div id='d1'>
<a>百度一下</a>
<a>百度一下</a>
<a>百度一下</a>
<a>百度一下</a>
</div>
<a>百度一下</a> </body>
CSS属性
CSS中的文本属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: yellowgreen;
font-family: "微软雅黑";
font-size: 50px;
color: red;
text-decoration: none;
text-align: right;
font-weight: bold;
line-height: 120px;
}
span{
color: black;
} </style>
</head>
<body>
HTML是世界上最好的编程语言.<br>
<span>
HTML是世界上最好的编程语言.<br>
HTML是世界上最好的编程语言.<br>
<span>
</body>
CSS中的背景属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: red;
background-image: url(img/tphot.jpg);
background-repeat: repeat-y; }
</style>
</head>
<body>
</body>
CSS中的列表属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li{
list-style-type:none;
list-style-image:url(img/tphot11.jpg);
}
</style>
</head> <body>
<ul>
<li>第1名</li>
<li>第2名</li>
<li>第3名</li>
<li>第4名</li>
</ul>
</body>
CSS中的显示属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
display: inline;
} ul li{
list-style-type: none;
display: inline;
} span{
height: 300px;
width: 300px;
background-color: salmon;
/*display: block;*/
} </style>
</head>
<body>
<input type="text" />
<div>
DIV
</div>
HTML
<ul>
<li>第1名</li>
<li>第2名</li>
<li>第3名</li>
<li>第4名</li>
</ul> <span>
我是一个块级标签
</span>
xxxxxx </body>
CSS中的浮动属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
font-size: 30px;
font-weight: 900;
color: rosybrown;
}
#d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
} #d2{
height: 300px;
width: 300px;
background-color: yellowgreen;
float: left;
} #d3{
height: 300px;
width: 300px;
background-color: black;
float: right;
} .clear{
clear: both;
}
</style>
</head> <body>
<div id="d1">DIV1</div>
<div id="d2">DIV2</div>
<div id="d3">DIV3</div>
<div class="clear"></div>
</body>
练习：注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#header{
height: 100px;
width: 100%;
} #content{
height: 700px;
width: 60%;
/*设置页面居中*/
margin: auto;
border: 2px solid black;
} .c1{
height: 30px;
width: 100%;
background-color: #F7F7F7;
} .c2{
height: 200px;
width: 100%;
background-color: white;
} #c2-left{
height: 100%;
width: 30%;
float: left;
text-align: right;
} #c2-left div{
height: 20%;
} #c2-right{
margin-left: 20px;
height: 100%;
width: 60%;
float: left;
}
#c2-right div{
height: 20%;
} .clear{
clear: both;
} .c6{
height: 120px;
width: 100%;
background-color: white;
}
#c6-zhuce {
height: 40px;
width: 250px;
background-color: red;
text-align:center;
margin: auto; }
#c6-zhucezi{
padding: 8px;
}
span{
color: red;
} </style>
</head> <body>
<div id="header"></div>
<div id="content">
<div class="c1"><strong><font> 账户信息</font></strong></div>
<div class="c2">
<div id="c2-left">
<div></div>
<div><span>*</span>用户名:</div>
<div><span>*</span>请输入密码:</div>
<div><span>*</span>请确认密码:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div><input type="password"/></div>
<div><input type="password"/></div>
</div>
<div class="clear"></div>
</div> <div class="c1"><strong><font> 联系人信息</font></strong></div>
<div class="c2">
<div id="c2-left">
<div></div>
<div><span>*</span>联系人姓名:</div>
<div><span>*</span>所在部门:</div>
<div><span>*</span>固定电话:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div>
<select>
<option selected="selected">请选择</option>
<option value="yjb">研究部</option>
<option value="xzb">行政部</option>
<option>人事部</option>
<option>市场部</option>
</select>
</div>
<div><input type="text"/></div>
</div>
<div class="clear"></div>
</div>
<div class="c1"><strong><font> 公司信息</font></strong></div>
<div class="c6">
<div id="c2-left">
<div></div>
<div><span>*</span>公司名称:</div>
<div><span>*</span>购买类型/用途:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div>
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" checked="checked"/>
</div>
</div>
<div class="clear"></div>
</div> <div id="c6-zhuce">
<div id="c6-zhucezi">
<font color="white">立即注册 </font>
</div>
</div> </div> </body> </html>
CSS盒子模型
盒子模型
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 300px;
width: 300px;
background-color: darkgreen;
/*上下左右*/
padding: 50px;
/*上 左右 下*/
/*padding: 50px 100px 150px;*/
/*padding: 50px 100px 150px 200px;*/
border: 5px solid red; } #moon{
height: 300px;
width: 300px;
background-color: yellow;
} #d1{
height: 300px;
width: 300px;
border: 5px dashed black;
} #d2{
height: 300px;
width: 300px;
border: 5px dotted black;
} div{
margin-left: 50px;
margin-bottom: 100px;
} </style>
</head> <body> <div id="box">
<div id="moon"></div>
</div> <div id="d1"></div> <div id="d2"></div> </body>
圆角边框
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width: 300px;
height: 300px;
border: 5px solid red;
margin: auto;
margin-top: 100px;
/*border-radius: 50px;*/
/*border-radius: 50px 100px 150px;*/ }
#d2{
width: 300px;
height: 300px;
border: 5px solid blue;
border-radius: 150px;
}
#d3{
width: 300px;
height: 150px;
border: 5px solid blue;
border-radius: 300px 300px 0px 0px;
} #d4{
width: 300px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 0px 0px 300px 300px;
} #d5{
width: 150px;
height: 300px;
border: 5px solid greenyellow;
border-radius: 300px 0px 0px 300px;
} #d6{
width: 150px;
height: 300px;
border: 5px solid greenyellow;
border-radius: 0px 300px 300px 0px;
} #d7{
width: 150px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 150px 0px 0px 0px;
} #d8{
width: 150px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 0px 150px 0px 0px;
} </style>
</head>
<body> <div id="d1"></div> <div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
</body>
盒子阴影
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 500px;
width: 500px;
background-color: salmon;
box-shadow: 0px 0px 30px yellowgreen;
}
</style>
</head>
<body> <div></div> </body>
CSS 的定位
相对定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 300px;
width: 300px;
background-color: greenyellow;
margin-top: 20px;
/*设置相对定位*/
position: relative;
left: 150px;
/*right: 100px;*/
float: left;
/*top: 50px;*/
bottom: 100px;
}
#d2{
height: 300px;
width: 300px;
background-color: cornflowerblue;
margin-top: 20px;
float: left;
} </style>
</head> <body>
<div id="d1">
</div> <div id="d2">
</div>
</body>
绝对定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
margin-top: 20px;
float: left;
} #d1{
background-color: greenyellow;
} #d2{
background-color: yellow;
/*设置成绝对定位*/
position: absolute;
left: 100px;
top: 500px; } #d3{
background-color: red;
}
</style>
</head> <body> <div id="d1">
</div> <div id="d2">
</div> <div id="d3">
</div>
</body>
固定定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 5000px; }
div{
height: 100px;
width: 80%;
background-color: greenyellow;
/*设置成固定定位*/
position: fixed;
top:300px;
}
</style>
</head> <body>
<div id="d1">我是一个广告~~~~~~~~~~~~~</div>
</body>
z-index属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
position: relative;
z-index: 10;
} #d2{
height: 300px;
width: 300px;
background-color: blue;
float: left;
margin-left: -200px;
margin-top: 50px;
z-index: 5;
position: relative;
} #d3{
height: 300px;
width: 300px;
background-color: yellowgreen;
float: left;
margin-left: -200px;
margin-top: 100px;
z-index: 1;
position: relative;
}
</style>
</head> <body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
设置元素透明度
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: blue;
opacity: 0.1;
}
</style>
</head>
<body>
<div>
DIV
</div>
</body>
前端学习：学习笔记（CSS部分）的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- spring mvc 及NUI前端框架学习笔记
spring mvc 及NUI前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(bus ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- 在Angular4中使用ng2-baidu-map详解
一.引言 之前在Angular4使用过百度地图,记录一下踩过的坑 二.实现 1.安装 npm install angular2-baidu-map 2.在app.module.ts配置 ak key在 ...
- MES系统实施4大关键点，您都知道吗？
MES是制造企业生产管理信息化的核心,能否成功实施和应用MES是企业实现提高生产效率,降低成本等信息化建设目标的关键所在. 但是,对于信息化基础相对薄弱的中国制造企业来说,MES的复杂性使得企业在进行 ...
- jmeter中websocket接口测试
一.Websocket协议简介 Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说: HTTP协议: HTTP的生命周期通过 Request 来界定,也就是一个 Request ...
- 1-9 Python判断结构
判断结构¶ In [3]: tang=100 if tang>200: print('OK') print('test')##有缩进就不在就不在if条件结构中 test In [6]: ...
- 003-OpenStack-镜像服务
OpenStack-镜像服务 [基于此文章的环境]点我快速打开文章 1.安装和配置 控制节点(controller) 1.1 创库授权 glance mysql CREATE DATABASE gla ...
- 16、基于状态的iptable+高级路由（重点）
-- 基于状态的iptables 如果按照tcp/ip来划分连接状态,有12种之多 但iptables里只有4种状态:ESTABLISHED.NEW.RELATED及INVALID 这两个 ...
- 微信公众号token验证失败
我用的是python3+,而官网给的例子是python2的写法.问题就在python版本不同. 下面是截取官方的实例代码的一部分 list = [token, timestamp, nonce] li ...
- SQL必知必会02 过滤数据/条件查询
- djangoORM 修改表结构/字段/外键操作
Django支持修改表结构 把max_length=64 改为60 再执行一遍 python manage.py makemigrations python manage.py migrate 如果是 ...
- Spring Boot 2.x 已经发布了很久，现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本，现在一起为项目做一次整体框架升级。
升级前 => 升级后 Spring Boot 1.5.x => Spring Boot 2.0.2 Spring Cloud Edgware SR4 => Spring Cloud ...