0
点赞
收藏
分享

微信扫一扫

day02：input、下拉框、文本域、frameset（target、name）、div、css、行内内部外部导入、选择器、字体的样式、文本的样式、背景的样式、边框样式、轮廓样式、列表的样式

驚鴻飛雪 2022-03-16 阅读 46
html前端css

一 回顾

二 input的属性(重点)

属性名属性值
id用于前端来获取这个标签
name用于后台获取输入框中的值
placeholder输入框中的提示信息
size表示输入框的大小
checked设置单选按钮与多选按钮默认选中
disabled表示按钮禁用
value表示输入框中的默认值

代码

效果

 

三 下拉框(重点)

代码

效果

四 文本域(重点)

代码

效果

五 案例

step01 需求

 

step02 分析

 

step03 代码

六 frameset(重点)

案例

step01 需求

 step02 分析

step03 代码-主界面

step04-左界面

step05-上界面

step06 右界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>欢迎登陆</h1>
    </body>
</html>
​

step07 商品管理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>我是商品管理</h1>
    </body>
</html>

step08 订单管理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>我是订单管理</h1>
    </body>
</html>
​

七 div(重点)

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                border: solid 1px red;
            }
        </style>
    </head>
    <body>
        <div>吴森要向陈亮宇发起酒挑战</div>
    </body>
</html>

 

八 css

8.1 css是什么

8.2 css 能做什么

8.3 css基础的语法

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h1 {
                color: red;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <h1>夏天到了去漂流</h1>
    </body>
</html>

效果

 

8.4 css引入的方式(重点)

8.4.1 行内引入

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2 style="font-size: 20px;color: royalblue;">夏天去漂流</h2>
	</body>
</html>

​效果

 8.4.2 内部引入

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			font-size: 80px;
			color: aquamarine;
		}
	</style>
	<body>
		<div>
			夏天去漂流
		</div>
	</body>
</html>

效果

8.4.3 外部引用

step01 在css文件夹下新建一个样式文件

 

step02 下文件中编写样式

h3{
	/*给字体加上阴影*/
	text-shadow: 5px 5px 5px #FF0000;
}

step03 创建html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--外部引入样式
			rel="stylesheet" 告诉浏览器以css样式进行解释  必须写上
			href  引入外部样式的地址
		-->
		<link rel="stylesheet" href="css/demo.css" />
	</head>
	<body>
		<h3>老坛酸菜牛肉面好吃吗?</h3>
	</body>
</html>

step04 外部导入

<style>
	@import url("css/demo.css");
</style>

step05 外部引入与外部导入的区别

8.4.4 三种引入方式的优先级

九 css 选择器

9.1 基本选择器(重点)

9.1.1 标签选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 div {
			 	width: 200px;
			 	height: 200px;
			 	border: solid 1px red;
			 }
		</style>
	</head>
	<body>
		<div>315发生了重大事件</div>
	</body>
</html>

效果

 

9.1.2 类选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*声明类选择器*/
			.getByClass {
				width: 200px;
				height: 200px;
				background-image: url(img/duola2.jpg);
			}
		</style>
	</head>
	<body>
		<div class="getByClass"></div>
	</body>
</html>

效果

9.1.3 id选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#getById {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="getById"></div>
	</body>
</html>

效果

9.1.4 三种选择器 优先级

9.2 属性选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type="text"]{
				color: red;
			}
			input[type="password"]{
				color: #7FFFD4;
			}
			a[href]{
				color: red;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get">
			<font>用户名</font>
			<!--只能读不能修改readonly-->
			<input type="text" readonly value="李家森" />
			<font>密码</font>
			<input type="password" value="哈哈"/>
			<a href="#">点我！1</a>
			<a href="#">点我！2</a>
			<a>点击我！介绍表妹</a>
		</form>
	</body>
</html>

效果

9.3 层级选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#tv_div .tv_class{
				color: red;
			}
			ul li {
				list-style-type: none;
				/*list-style-image: url(img/duola2.jpg);*/
			}
			.tv_class #tv_id{
				color: gold;
			}
			
		</style>
	</head>
	<body>
		<div id="tv_div">
			<div class="tv_class">红色</div>
			<div class="tv_class">红色</div>
			<div class="tv_class01">红色</div>
		</div>
		<ul>
			<li>篮球</li>
			<li>足球</li>
			<li>羽毛球</li>
		</ul>
		<div class="tv_class">
			<div id="tv_id">金色
			<span>
				<div id="tv_id">金色</div>
			</span>
			</div>
			<div id="tv_id01">夏天到了</div>
			<div id="tv_id01">夏天到了</div>
		</div>
	</body>
</html>

效果

9.4 伪劣选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			a:link{
				color: red;
			}
			a:hover{
				color: yellow;
			}
			a:active{
				color: aqua;
			}
			a:visited{
				color: #4169E1;
			}
		</style>
	</head>
	<body>
		<a href="#">春夏秋冬</a>
	</body>
</html>

效果

十 css常用的样式(查看w3c)

10.1字体的样式

属性名属性值
font-size字体的大小
font-style字体的样式
font-family字体的类型
font-weight字体的粗细

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h3{
				font-size: 20px;
				font-style: oblique;
				font-family: "仿宋";
				font-weight: bold;
			}
			span{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<span>三月</span>
		<h3>三月十六晚上八点</h3>
	</body>
</html>

效果

10.2文本的样式

属性名属性值
text-shadow: 2px 2px 5px red设置文本的阴影(水平阴影,垂直阴影,模糊效果,颜色)
text-align对齐方式
line-height设置行高
text-decoration设置文本的下划线
text-indent设置文字的缩进

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h3{
				text-shadow: 5px 5px 5px red;
			}
			div{
				width: 200px;
				height: 200px;
				border: solid 1px red;
				text-align: center;
				/*设置行高为容器的高度*/
				line-height: 200px;
			}
			a{
				text-decoration: none;
			}
			h4{
				text-indent: 20px;
			}
		</style>
	</head>
	<body>
		<h3>三月16了</h3>
		<div>继续学习</div>
		<a href="#">哈哈</a>
		<h4>广州天气变热了</h4>
	</body>
</html>

效果

10.3 背景的样式

属性名属性值
background-color背景颜色
background-image背景图片
background-repeat是否平铺
background-size设置图片的大小
background-position设置图片的偏移

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 400px;
				height: 400px;
				/*background-color: red;*/
				border: solid red 1px;
				background-image: url(img/duola2.jpg);
				background-repeat: no-repeat;
				/*background-position: center;*/
				background-size: 400px 400px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果

10.4 边框样式

属性名属性值
border-xxx-style设置边框的样式
border-xxx-width设置边框的宽度
border-xxx-color设置边框的颜色
border-radius设置边框的圆角

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: solid 1px red;
				border-radius: 50%;
				background-image: url(img/duola2.jpg);
				/*border-radius: 5px;*/
				/*border-top:solid red 5px;*/
				/*border-top-color: red;
				border-top-style: double;
				border-top-width: 5px;*/
				/*border-top:solid double 5px;*/
				
				/*border-right-color: yellow;
				border-right-style: solid;
				border-right-width: 5px;*/
				/*border-right: yellow solid 5px;*/
				
				/*border-bottom-color: green;
				border-bottom-style: groove;
				border-bottom-width: 5px;*/
				/*border-bottom: green groove 5px;*/
				
				/*border-left-color: pink;
				border-left-style: dashed;
				border-left-width: 5px;*/
			/*	border-left:pink dashed 5px ;*/
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

效果

10.5 轮廓样式 

属性名属性含义
outline-style轮廓的样式
outline-color轮廓的颜色
outline-offset设置轮廓的偏移
outline-width轮廓的宽度

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: solid 1px red;
				outline-style: dashed;
				outline-color: royalblue;
				outline-width: 5px;
				outline-offset: 20px;
				margin-left: 50px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果

10.6 列表的样式

属性名属性含义
list-style-type设置列表前缀
list-style-image设置列表的图片

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li{
				list-style-type: none;
				list-style-image: url(img/icon1.bmp);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>星期一</li>
			<li>星期二</li>
			<li>星期三</li>
		</ul>
		<ol>
			<li>星期四</li>
			<li>星期五</li>
			<li>星期六</li>
		</ol>
	</body>
</html>

效果

 

举报

相关推荐

CSS的文本样式属性值，学习CSS行内样式

Web开发程序员前端jQuery前端开发

CSS的行内样式与内联样式，CSS字体样式的使用

Web开发程序员前端jQuery前端开发

css的字体属性和文本样式

css

css边框样式(css边框样式属性使用的是)

csscss3html前端html5虚拟化云计算

CSS的行内样式与内联样式，CSS元素分类

Web开发程序员前端jQuery前端开发

WPF样式详解：行内样式、模板样式和页面样式的全方位分析

Unity引擎C#客户端发送消息到服务器

CSS的文本样式属性值

日记本视觉艺术让前端飞

CSS的行内样式与内联样式，web应用开发

经验分享面试前端

基础选择器+字体文本相关样式+css引入方式

前端css3

2.1css基础选择器、引入方式、字体文本样式、

css前端
0 条评论