前端学习：学习笔记（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和定义列表:引用块 ...
随机推荐
- SPFA板子
#pragma GCC optimize(3) #include <bits/stdc++.h> using namespace std; ; vector<pair<int, ...
- curl tftp libcurl 功能使用
#include <curl/curl.h> static size_t read_callback(void *ptr, size_t size, size_t nmemb, void ...
- openssl生成随机数
#include <stdio.h> #include <openssl/bn.h> int main() { BIGNUM *bn; bn = BN_new(); //生成一 ...
- afnetwork使用
Usage HTTP Request Operation Manager AFHTTPRequestOperationManager encapsulates the common patterns ...
- PMP备考-第一章-引论
项目 项目是为创造独特的产品,服务和成果而进行的临时性工作.在规定的范围,进度,成本,和质量要求之下完成项目可交付成果. 项目与运用 项目 :临时性,独特性,渐进明细 运营 :持续的,相似性,标准化 ...
- foreachRDD
需求: 将统计结果写入到MySQL create table wordcount( word varchar(50) default null, wordcount int(10) default n ...
- c++ win32下窗口的最小化到托盘以及还原
框架是用visual studio创建的win32控制台模板,然后自己添加最小化及还原部分代码. 需要额外包含的头文件: #include <shellapi.h> #include &l ...
- luoguP4393Sequence
https://www.luogu.org/problem/P4393 题意 给你n个点的一个数列,每次可以合并两个相邻的数为他们的最大值,且代价为这两个数的最大值,求将整个序列合并为1个数的最小代价 ...
- shell 字符菜单管理
1.创建一个脚本func.sh 脚本如下func2.sh #!/bin/bash function menu(){ title="My Menu" url="www.la ...
- XML 配置文件，知识点
namespace 属性:配置成接口的全限定名称,将 Mapper 接口和 XML 文件关联起来: select 标签的 id 属性值,对应定义的接口方法名. insert 标签的属性 paramet ...