Web前端-CSS
内容简单回顾
什么HTML : 超文本标记语言css
p标签: 段落标签html
br标签: 简单换行程序员
h1-h6: 标题标签服务器
hr标签: 水平分割线, 华丽的分割线框架
font标签: color属性改变颜色 , size函数
b标签: 加粗布局
i标签: 斜体post
strong标签: 带语义的加粗字体
em标签: 斜体标签,带语义优化
img标签: 图片标签 显示图片
src: 指定图片路径(相对路径)
width: 宽度
height: 高度
alt: 图片加载失败时的提示
相对路径:
./ 表明当前路径
../ 表明的是上一级路径
../../ 表明的是上上一级路径
ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项
a标签: 超连接标签:
target: 打开方式
href: 指定要跳转的连接地址
table标签: table > tr > td
tr标签: 行
td标签: 列
合并行: rowspan
合并列: colspan
网站注册案例:
form 标签: 表单标签,主要是用来向服务器提交数据
method: 提交方式 get post
action : 提交的路径
input 标签:
type:
password: 密码框
text : 文本
submit: 提交
button: 普通的按钮
reset: 重置按钮
radio: 单选按钮 设置name属性让它们是一组
checkbox: 复选按钮
email:
date:
tel:
frameset : 框架标签
rows:
cols:
frame:
使用CSS完成网站首页的优化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<!--<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>-->
</head>
<body>
<!--
1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超连接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超连接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三个div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div style="clear: both;"></div>
<!--3. 第二部分: 导航栏部分 : 放置5个超连接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首页</a>
<a href="#" class="amenu">手机数码</a>
<a href="#" class="amenu">电脑办公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香烟酒水</a>
</div>
<!--4. 第三部分: 轮播图-->
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左侧广告图-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右侧商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一张图片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左侧广告图-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右侧商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一张图片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超连接-->
<div style="text-align: center;">
<a href="#">关于咱们</a>
<a href="#">联系咱们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情连接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权全部
</div>
</div>
</body>
</html>
需求分析:
因为咱们昨天使用表格布局存在缺陷,那么咱们要来考虑使用DIV+CSS来对页面进行优化
表格布局的缺陷:
1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果 2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变
技术分析
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
CSS概述:
Cascading Style Sheets : 层叠样式表
红砖, 抹了一层水泥, 白灰
主要用做用:
用来美化咱们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
html <style> 选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style>
CSS选择器: 帮助咱们找到咱们要修饰的标签或者元素
选择器入门：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
-->
<style>
div{
color:red;
font-size: 50px;
}
</style>
</head>
<body>
<!--将内容字体颜色改为红色-->
<div>你们新年好,恭喜发财,红包拿来</div>
<div>你们新年好,恭喜发财,红包拿来</div>
<div>你们新年好,恭喜发财,红包拿来</div>
<div>你们新年好,恭喜发财,红包拿来</div>
<div>你们新年好,恭喜发财,红包拿来</div>
</body>
</html>
后代选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*请将H1下面的全部 em 元素 的内容颜色改为 红色*/
/*中间以空格隔开的是后代选择器*/
h1 > em{
color: red;
}
</style>
</head>
<body>
<h1>
This is a
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
heading
</h1>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--修改包含title属性的a标签-->
<style>
/*a[title='aaa']{
color: red;
}*/
a[href][title]{
color: yellow;
}
</style>
</head>
<body>
<a href="#" title="aaa">张三</a>
<a href="#" >李四</a>
</body>
</html>
伪类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link {color: red} /* 未访问的连接 */
a:visited {color: #00FF00} /* 已访问的连接 */
a:hover {color: #FF00FF} /* 鼠标移动到连接上 */
a:active {color: #0000FF} /* 选定的连接 */
</style>
</head>
<body>
<a href="#">黑马程序员</a>
</body>
</html>
元素选择:经常使用
html 元素的名称{ 属性名称:属性的值; 属性名称:属性的值; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<span>讲完这个内容你们就能够下课了</span>
<span>讲完这个内容你们就能够下课了</span>
<span>讲完这个内容你们就能够下课了</span>
<span>讲完这个内容你们就能够下课了</span>
</body>
</html>
ID选择器:经常使用
html 以#号开头 ID在整个页面中必须是惟一的 #ID的名称{ 属性名称:属性的值; 属性名称:属性的值; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
* */
#div1{
color: red;
}
</style>
</head>
<body>
<!--请将JAVAEE颜色改为红色-->
<div id="div1">JAVAEE</div>
<div>IOS</div>
<div>ANDROID</div>
</body>
</html>
类选择器:经常使用
html 以 . 开头 .类的名称{ 属性名称:属性的值; 属性名称:属性的值; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
-->
<style>
.shuiguo{
color: yellow;
}
.shucai{
color: green;
}
</style>
</head>
<body>
<!--
请将水果类,改为黄色
蔬菜类改为绿色
-->
<div class="shuiguo">香蕉</div>
<div class="shucai">黄瓜</div>
<div class="shuiguo">苹果</div>
<div class="shucai">茄子</div>
<div class="shuiguo">橘子</div>
</body>
</html>
CSS的引入方式:
外部样式: 经过link标签引入一个外部的css文件
style1.css
.shuiguo{
color: pink;
}
.shucai{
color: green;
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style1.css" /> </head> <body> <div class="shuiguo">香蕉</div> <div class="shucai">黄瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style1.css" /> </head> <body> <div class="shuiguo">甘蔗</div> <div class="shucai">青瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
rel="stylesheet"：样式表
内部样式: 直接在style标签内编写CSS代码
行内样式: 直接在标签中添加一个style属性, 编写CSS样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--经过行内样式修改甘蔗--> <div class="shuiguo" style="color: greenyellow;">甘蔗</div> <div class="shucai">青瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不容许浮动
left: 左边不容许浮动
right : 右边不容许浮动
流式布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间 float属性: left right clear属性: 清除浮动 both : 两边都不容许浮动 left: 左边不容许浮动 right : 右边不容许浮动 流式布局 --> <div style="float:left;width: 200px; height: 200px; background-color: red;"></div> <div style="clear: both;"></div> <div style="width: 250px; height: 200px; background-color: greenyellow;"></div> <div style="width: 200px; height: 200px; background-color: blue;"></div> </body> </html>
CSS块标签
div标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>张三</div> <div>李四</div> </body> </html>
span标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span>王武</span> <span>赵六</span> </body> </html>
CSS优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素选择器*/
div{
color: red;
}
/*类选择器*/
.chifan{
color: deeppink;
}
/*ID选择器*/
#div1{
color: greenyellow;
}
/*
按照选择器搜索精确度来编写:
行内样式 > ID选择器 > 类选择器 > 元素选择器
*/
.first{
color: green;
}
.second{
color: blue;
}
/*就近原则*/
</style>
</head>
<body>
<!--<div class="chifan" id="div1" style="color: goldenrod;">扩展完,就能够去吃饭啦!</div>-->
<div class="second first ">讲完这个真的能够去吃饭啦!</div>
</body>
</html>
步骤分析:
- 创一个最外层div
- 第一部份: LOGO部分: 嵌套三个div
- 第二部分: 导航栏部分 : 放置5个超连接
- 第三部分: 轮播图
- 第四部分:
- 第五部分: 直接放一张图片
- 第六部分: 抄第四部分的
- 第七部分: 放置一张图片
- 第八部分: 放一堆超连接
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 当页面加载完成的时候, 动态切换图片
1.肯定事件:
2.事件所要触发的函数
*/
var index = 1;
//切换图片的函数
function changeAd(){
//获取要操做的img
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg"; //0,1,2 //1,2,3
index++;
}
function init(){
//启动定时器
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html>
网站注册页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/main.css"/> </head> <body> <!-- 1. 总共是5部分 2. 第一部分是LOGO部分 3. 第二部分是导航菜单 4. 第三部分是注册部分 5. 第四部分是FOOTER图片 6. 第五部分是一堆超连接 --> <div> <!--2. 第一部分是LOGO部分--> <div> <div class="logo"> <img src="../img/logo2.png" /> </div> <div class="logo"> <img src="../img/header.png" /> </div> <div class="logo"> <a href="#">登陆</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--清除浮动--> <div style="clear: both;"></div> <!--3. 第二部分是导航菜单--> <div style="background-color: black; height: 50px;"> <a href="#" class="amenu">首页</a> <a href="#" class="amenu">手机数码</a> <a href="#" class="amenu">电脑办公</a> <a href="#" class="amenu">鞋靴箱包</a> <a href="#" class="amenu">香烟酒水</a> </div> <!--4. 第三部分是注册部分--> <div style="background: url(../image/regist_bg.jpg);height: 500px;"> <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;"> <table width="60%" align="center"> <tr> <td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td> </tr> <tr> <td>用户名:</td> <td><input type="text"/></td> </tr> <tr> <td>密码:</td> <td><input type="password"/></td> </tr> <tr> <td>确认密码:</td> <td><input type="password"/></td> </tr> <tr> <td>email:</td> <td><input type="email"/></td> </tr> <tr> <td>姓名:</td> <td><input type="text"/></td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="sex"/> 男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/> 妖 </td> </tr> <tr> <td>出生日期:</td> <td><input type="date"/></td> </tr> <tr> <td>验证码:</td> <td><input type="text"/></td> </tr> <tr> <td></td> <td><input type="submit" value="注册"/></td> </tr> </table> </div> </div> <!--5. 第四部分是FOOTER图片--> <div> <img src="../img/footer.jpg" width="100%"/> </div> <!--9. 第四部分: 放一堆超连接--> <div style="text-align: center;"> <a href="#">关于咱们</a> <a href="#">联系咱们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情连接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br /> Copyright © 2005-2016 传智商城 版权全部 </div> </div> </body> </html>
绝对定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 5px solid red; width: 400px; height: 400px;position: absolute;top: 200px;left: 200px;"> 黑马程序员 </div> </body> </html>
盒子模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border:3px solid red ; width: 400px; height: 400px;" > <div style="border:1px solid gray; width: 150px; height: 150px;padding: 10px 20px 30px;">肾7plus</div> <div style="border:1px solid yellow; width: 150px; height: 150px;">华为P9</div> </div> </body> </html>
main.css
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
相关文章
- 1. Web前端之CSS
- 2. Web前端-CSS篇
- 3. web前端css--position
- 4. web前端css(二)
- 5. web前端之css
- 6. 【Web前端】CSS选择器
- 7. Web前端篇：css浮动
- 8. Bootstrap（Web前端CSS框架）
- 9. 【Web 前端】CSS样式
- 10. web前端-CSS Position 定位
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Web前端之CSS
- 2. Web前端-CSS篇
- 3. web前端css--position
- 4. web前端css(二)
- 5. web前端之css
- 6. 【Web前端】CSS选择器
- 7. Web前端篇：css浮动
- 8. Bootstrap（Web前端CSS框架）
- 9. 【Web 前端】CSS样式
- 10. web前端-CSS Position 定位