这篇博客主要探讨了CSS在前端开发中的应用，包括display块级元素的转换，背景样式的设置，以及雪碧图的使用。此外，还介绍了如何制作简单的网站导航页，并讲解了CSS引用方法，强调了将样式代码整理到单独的CSS文件中的重要性。
补充一个表单：
<!--
form 表单 是一个 块级元素， 高度是由内容进行填充的
form 表单 是提交数据 到 后端服务器的
1. method : 请求方式. 默认值是 GET, form一般会使用 POST
浏览器支持的请求方式 主要有 GET, POST
服务器支持的请求方式 有 GET, POST, PUT ,PATCH, DELETE , OPTIONS
GET : 从服务器获取数据，通常用于 查询数据
POST : 发送多个数据给服务器，通常用于 新增数据
PUT : 修改服务器的数据， 通常用于 修改数据
PATCH : 修改服务器的数据, 通常用于 修改部分数据
DELETE : 删除服务器的数据，通常用于 删除数据
OPTIONS : 做预检查的，对复杂的请求(PUT, PATCH, DELETE)验证服务器是否支持
2. action : 设置 请求的地址 URL (网址)，默认是 空， 代表发送到当前网址中
3. enctype : 设置 数据的 提交方式, 默认值 application/x-www-form-urlencoded
默认值 代表以 表单的形式( 键值对 )将数据提交到服务器中
multipart/form-data : 以文件上传的方式提交数据
-->
<form method="post" action="https://www.baidu.com">
<!--
所有的表单元素，如果要提交数据，必须设置 name 属性
常见的表单元素有
input 标签, value 属性设置 值
-->
<p>
<label>用户名:</label>
<!--
type 用来设置 input 标签的类型
type = "text" : 纯文本输入框,
readonly 设置 为 只读
-->
<input type="text" name="username" value="zhangsan"/>
</p>
<p>
<label>密码：</label>
<!-- 密码框 type="password" -->
<input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<!--
单选框 type="radio" value属性值在页面是看不到，是提交到服务器的值
单选框 name 属性 必须保持一致，才能产生 互斥现象
通过 checked 属性 设置 该 单选框是否默认被选中，checked是个 boolean值
-->
<input type="radio" name="sex" value="m" checked />男
<input type="radio" name="sex" value="f" />女
</p>
<p>
<label>爱好:</label>
<!--
复选框 type="checkbox"
默认选中 选中 学Java
禁用 游泳 disabled
-->
<input type="checkbox" name="hobby" value="爬山"/>爬山
<input type="checkbox" name="hobby" value="游泳" disabled />游泳
<input type="checkbox" name="hobby" value="学Java" checked />学Java
<input type="checkbox" name="hobby" value="听音乐"/>听音乐
<input type="checkbox" name="hobby" value="跑步"/>跑步
</p>
<p>
<label>出生日期:</label>
<!--
日期框 type="date"
-->
<input type="date" name="birth">
</p>
<p>
<label>个人邮箱:</label>
<!--
日期框 type="email"
-->
<input type="email" name="email">
</p>
<p>
<label>个人头像:</label>
<!--
文件上传框 type="file"
-->
<input type="file" name="photo" accept="image/jpeg,image/png,image/gif">
</p>
<p>
<!--
type = submit 提交按钮，会自动提交 form 表单
按钮的类型有 三种
submit : 会自动提交表单
button : 普通按钮，不会提交表单，需要通过 JS 去实现表单提交
reset : 重置表单
-->
<input type="submit" value="用户注册">
<button type="button">普通按钮</button>
<input type="reset" value="重置按钮">
<!-- <input type="image" src="./images/01.jpg" width="25px">-->
</p>
</form>
样式
光有文本并不够，我们还需要用样式，做效果。
为了更方便找到一个或者多个标签，我们可以在标签中，添加
class 或者 id
<div class="dots">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
- class可以重名，可以选中多个名叫calss=dot的标签
- id 唯一，每个html文件中，只能有一个 例如 id="123"的标签
选中标签：
.+class名 选中类
#+id名 选中id
在head标签中，添加style标签：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dots{
}
.dots span{
}
</style>
</head>
即可选中标签，在{ }中 添加样式就可以对标签进行控制
各种样式如图所示，试试效果记住名字。
<style>
.dots{
width: 1000px;
height: 40px;
background-color: rgba(40,40,40,0.5); /**设置字体颜色，和透明度*/
text-align: center;/*居中*/
line-height: 50px;/* 行高 适用于容器还有一行的垂直居中，如果设置了字体大小为0，则需要+行内块高度*/
font-size: 0px;
}
.dots span{
display: inline-block;/*把行内元素 做成 行内块级元素*/
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
margin-right: 5px;
}
</style>
display块级元素的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*display: none; !*隐藏元素*!*/
width: 300px;
height: 300px;
background-color: red;
}
a{
display: inline-block;
width: 100px;
height: 40px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div>
</div>
<a>百度</a>
</body>
</html>
将注释的 display: none; 取消注释，点开右上角 谷歌浏览器（没有的建议下一个），进入网页查看效果。
background背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#pl{
width: 780px;
height: 468px;
/*background-image: url("./images/321.jpg");!*s设置背景图*!*/
/*background-color: cornflowerblue;*/
/*background-repeat: repeat-x;!*水平方向重复*!*/
/*background-repeat: repeat-y;!*垂直方向重复*!*/
/*background-repeat: no-repeat;!*是否重复*!*/
/*background-repeat: round;!*拉伸*!*/
/*background-position: 100px 100px;*/
/*background-size: 110%;!*设置背景图 宽高，*!*/
background: red url("./images/321.jpg")no-repeat;
}
</style>
</head>
<body>
<div id="pl"></div>
</body>
</html>
雪碧图的使用
添加图片时，尽量将需要的图片，放入idea下自己创建的image文件进行管理。可以直接拖入，记得该图片后缀.jpg .png等等 都可以
而雪碧图只是图片的一种，通常是将各个需要的图案放在同一个图片中：
这就是一个轮播图的左右跳转的特效雪碧图
通过样式操作，只显示雪碧图其中的一部分，显示在特定的位置，来完成网页设计。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon{
background-image: url("./images/top.png"); background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 30px;
padding-left: 30px;
font-size: 20px;
line-height: 27px;
}
.icon-tel {
background-position-y: -7px;
padding-left: 32px;
}
.icon-pay {
background-position-y: -30px;
}
.icon-coll {
background-position-y: -55px;
}
.icon-user {
background-position-y: -100px;
}
.icon-cart {
background-position-y: -120px;
}
.icon-menu {
background-position-y: -143px;
}
</style>
</head>
<body>
<span class="icon icon-tel">联系我</span>
<span class="icon icon-pay">付款</span>
<span class="icon icon-coll">收藏</span>
<span class="icon icon-user">用户</span>
<span class="icon icon-cart">购物车</span>
<span class="icon icon-menu">菜单</span>
</body>
</html>
简单的网站导航页制作：
前端的视觉效果设计，没有绝对的标准，可以自己按调整样式，做出自己想要的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav{
width: 900px;
height: 100px;
background-image: url("./images/首页背景.png");
background-repeat: repeat-x;
font-size: 0;
margin: 0 auto;
}
<!-- 子选择器 -->
ul li{
list-style: none;
display: inline-block;
width: 120px;
height: 100%;
line-height: 80px;
font-size: 20px;
}
ul li:hover{
}
.cur{
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">上传</a></li>
<li><a href="">论坛</a></li>
<li><a href="">个人信息</a></li>
<li><a href="">下载</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">退出登录</a></li>
</ul>
</div>
</body>
</html>
CSS引用方法
为了使代码整洁，以前写在head部的样式，我们可以统一写在对应的.css文件中
html文件：
这里注意需要确保路径正确，简易放在同一一个包：CSS样式文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS样式/CSS_1.css">
<style>
/**
选择器 { 属性名： 属性值}
标签选择器
*/
p{
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<!--
将字体颜色设置为红色，将背景色设置为黄色
Css引入方式
1.行内样式，在标签上，通过style属性添加样式(不推荐写)
缺点: CSS 和HTML 没有进行分离，只能运用与 一个元素
2.内嵌样式，用<style> 标签来定义样式，推荐写在head中
-->
<p style="color: red;background: black">四年烦恼废污泥</p>
<p>第二行</p>
</body>
</html>
CSS文件：
/* CSS的注释
1.标签选择器
通过标签的名字 选择 对应的选择
2.ID选择器
通过标签的 ID 属性。 选中对应的元素
3.class 选择器
通过 标签的class属性值 ，选中对应的元素
4.后代选择器
两个选择器 用空格分隔，
*/
#text{
text-transform: uppercase;/*字母大写*/
text-decoration: line-through;/*删除线*/
text-decoration: underline;/*下划线*/
text-decoration: none; /*不使用装饰*/
text-indent: 32px;/*首行缩进 32 像素*/
text-indent: -32px;
padding-left: 50px;/*左对齐*/
letter-spacing: 5px;/*中文字体间距*/
width: 500px;
white-space:normal;/*保留空白，不换行*/
overflow: hidden;/*文本溢出处理*/
text-overflow: ellipsis;
}
div{
width: 800px;/*容器宽*/
height: 400px;/*容器高*/
background-color: rgb(200,200,200);
}
/* #ID选择器以 # 作为标识符 */
#wd{
font-size: 30px;
}
@font-face {/*自定义字体*/
font-family: Arial;
/*src: url("");*/
}
/* 类选择器 以 点 作为标记 */
.lk{
text-decoration: none;
color: #08c9d0;
}
.sl{
/*font-weight: 200;*/
}
.s2{
font-weight: 200;
}
div .xxx{
text-align: center;/*水平居中*/
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
