HTML5与CSS3网页设计
<!--一个网页的基本结构写法-->
<!doctype html>
<html>
<head>//头部
<title>标题</title>
</head>
<body>主体内容……</body>
</html>
<head>……<head/>(头部)<title>……<title>(标题)<body>……</body>(身体)
<h#>标题内容</h#> (#：1~6) <p>字段内容</p> (用于分段) <br>（换行作用） <hr>（水平线） （空格）©（©）
color（颜色）size（厚度）bgColor（背景颜色）background（背景图片）marquee（滑动字幕）
<!--注释内容--> （网页中注释符的写法）
示例：
<!doctype>
<html>
<head><title>示例</title></head>
<body bgcolor="#bbffff">
<h1 align="center">大主宰</h1>
<hr size="5px" width="70%" color="bule">
<br>
<h2>第一章</h2>
<p>这里是第一章……</p>
<h2>第二章</h2>
<p>这里是第二章……</p>
</body>
</html>
<ul><li>……</li></ul>（无序列表）<ol><li>……</li></ol>（有序列表）<a href="链接地址">……</a> (导航链接)
片段（把代码复制到body中查看效果）
<nav>
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
</nav>
片段（把代码复制到body中查看效果）
<table border="2"><caption>学员信息</caption>
<tr><th>姓名：</th><th>性别：</th></tr>
<tr><td><i><b>陈扬胜</b></i></td><td><b><i>男</i></b></td></tr>
</table>
<u>……</u>（下划线）<i>……</i>（倾斜）<b>……</b>（加粗） border（边框宽度）width（表格宽度）eight（表格高度）
<table>……</table>（表格）<caption>……</caption>（表格的标题）<th>……</th>（列头单元格）<tr>……</tr>（行）<td>……</td>（列）
<img src="图片文件地址" alt="图片">（alt:图片说明） <audio src="音频文件地址" controls="controls">您的游览器不支持aduio标签</audio>
<video src="视频文件地址" width+"宽" eight="高" controls="controls">您的游览器不支持video标签</video>
（宽、高，替换成数字，controls属性是暂停播放的属性控件）
片段（把代码复制到body中查看效果）
<div> <!--嵌套列表标签的使用例子-->
<ul><li><a href="#">信息</a></li></ul>
<ul><li>姓名：</li><li>性别：</li></ul>
</div>
多行文本代码片段 按钮代码片段
<textarea rows="3" cols="20">……</textarea>（多行文本,3、20参数，根据需求填） <button type="button">点我啊！</button>（按钮）
<select><option value="姓名">陈扬胜</option></select>（创建菜单和选项）
片段（把代码复制到body中查看效果）
<select>
<optgroup label="组长"><option value="组长">张健文</option></optgroup>
<optgroup label="组员"><option value="组员">陈扬胜</option><option value="组员">肖商富</option><option value="组员">李木炜</option></optgroup>
</select>
<form><!--简单表单代码片段-->
<label for="txtName">姓名：</label><input type="text" id="txtName"/>
</form>
<form><!--组合表单代码片段-->
<fieldset><legend>个人信息</legend>姓名：<input type="text" id="txtName"/></fieldset>
</form>
选择器 属性 值 属性 值
css基础语法： h1{color:red;font-size:14px;}
<标记名 style="样式规则的集合">网页内容</标记名>
行内样式的定义及应用：
<p style="color:bule;font-size:10pt">css实例</p>
写在<head>里 样式集合（内容由自己定义）
嵌入样式的定义及应用：
<head><style type="text/css">p{color:blue;font-size:20pt;}</style>……</head>
外部样式的应用：
<head><style type="text/css">@import"*.css";</style></head>
（*填样式文件的名字）
外部样式示例：
<!doctype html>
<html>
<head>
<style type="text/css">@import"ys.css"；</style>
<title>外部样式示例</title>
</head>
<body>CSS样式的应用</body></html>
css样式文件的内部结构：
p
{
text-decoration:blink;<!--文本闪烁-->
text-decoration:none;<!--文本去掉下划线-->
text-decoration:underline;<!--文本加下划线-->
text-decoration:overline;<!文本顶端画下划线>
text-decoration:line-through;<!--文本中间加个贯穿线-->
text-indent:5em;<!--文本缩进-->
background-position:top;<!--图形位置-->
word-wrap:break-word;<!--自动换行-->
font-family:serif;<!--字体样式-->
font-style:italic;<!--字体风格-->
font-size:30pt;<!--字体大小-->
font-weight:900;<!--字体加粗-->
} body
{
background-image:url(img\1.jpg),url(img\2.png);;<!--多重背景图片-->
}
链接样式属性：
a:link{color:#FF0000;}/*！未被访问时链接的效果*/
a:visited{color:#00FF00;}/*已被访问的链接效果*/
a:hover{color:#FF00FF;}/*！鼠标指针移动到链接上时的效果*/
a:active{color:#0000FF;}/*正在被点击时的链接效果*/
a:link{decoration:none;}/*去掉链接中的下划线*/
<!--当为链接的不同状态设置样式时，请按照以上的次序来写-->
鼠标在字体上滑动停留效果
<marquee onMouseOver="this.stop()" onMouseOut="this.start()"></marquee>
设置链接的背景色
a:link{background-color:#0066FF;}<!--在样式中写-->
设置列表项标志形状
ul{list-style-type:square;}<!--写在样式中-->
设置列表项图像
ul li{list-style-image:url(图像位置)}
表格的宽度和高度
table{width:100% eight:50px;}<!--两种写法都可以-->
表格文本对齐方式
td{text-align:center;}
表格内边距
td{padding:15px;}
设置链接字体变大效果
a:link{font-size:10px;}
a:hover{font-size:15px;}<!--写在样式里-->
折叠边框
table{border-collapse:collapse;}
组选择器
body,h2,p,table,th,td,pre,strong,em{color:gray;}<!--如果你想把多个元素显示为灰色，可以组合选择器，统一写规则-->
包含（后代）选择器
table tr td p{font-size:9pt}
子元素选择器
<!--如果你希望选择只作为h1元素子元素strong元素，可以这样写，这样写的范围缩小了，而且更准确-->
h1>strong{color:red;}
后代选择器和子选择器
table td >p
类选择器
相邻兄弟选择器
<style>
p+span{
border:1px solid red;
background:yelllow;
}
</style> <div>
<p>
我是p
</p>
<span>我是相邻p标签的span</span>
<span>我不是相邻的span</span>
</div>
作用范围：选择相邻的两个元素 元素一定要有同一个父级，+后面的元素享受样式。
比如上面只有 ：我是相邻p标签的span享受样式
1、什么是选择器？
2、选择器分文哪三种？
3、什么是标签选择器？
4、标签选择器可派生出哪4中选择器？
5、类和ID选择器分别要用到哪两个符号？
选择符的分类
属性选择符
h1{属性：值；}
组选择符
h1,h2,h3{属性：值；}
包含选择符
p h1{属性：值；}
class类选择符
.div{属性：值；}
<div class="div"></div>
ID选择符
#div{属性：值；}
<div id="div"></div>
伪类选择符
#div:pseudo-class{属性：值；}
a:link{属性：值;}
a:visited{属性：值;}
a:hover{属性：值；}
a:active{属性：值；}
p:first-letter{属性：值}--首字的伪类样式
p:first-line{属性：值}--首行的伪类样式
通配选择符
*{属性：值；}
边框样式（写在样式文件，或内嵌行内样式中）
{border-style:solid;}<!--实线边框-->
{border-style:dotted;}<!--点线边框-->
{border-style:dashed;}<!--虚线边框-->
{border-style:double;}<!--双线边框-->
HTML5与CSS3网页设计的更多相关文章
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- 经典网页设计：20个华丽的 iPhone 应用程序演示网站
一个物品销售很好,重要的原因之一是它的包装,因为这是最重要的细节,可以把一个人转变成购买者.一个好的包装设计和良好的表现比产品本身更重要,因此被分配了大量的金钱和资源,以创造伟大的东西. 因此,为了销 ...
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- MiracleSnow网页设计HTML5+CSS3+JS全套视频教程
终于把这套课程讲完了,虽然时间隔了很长,但也算有始有终了,这是在YY讲课中我自己录的,讲了网页设计的基础,这也是我第一次给那么多人讲课,讲的不好多多包涵. 前几次视频和课件是分开的,后几次都打包在一起 ...
- HTML5、CSS3响应式设计——笔记
1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...
- 如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
- html5、css3及响应式设计入门
一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...
随机推荐
- react生命周期es6
基本函数有 import React from 'react' export default class MyClass extends React.Component { constructor(p ...
- html5-audio 播放列表和自动播放
一个简单audio的列表和播放小例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- vue2.0 学习 ，开始学习
先看官网的介绍上面的教程 https://cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.你可以在浏览器新标签 ...
- linux day4
echo $? :上一次命令是否执行正确make clean :清理编译垃圾文件env :查询环境变量 安装pip下载软件源cat /etc/pip.conf [global] index-url = ...
- 构建微软智能云：介绍新的Azure业务转型创新技术
在我和用户的交流中发现,在任何类型和规模的组织中,每当涉及到在云中实现商业价值的最大化并取得竞争优势的时候,就会明显呈现三个趋势.首先,应用程序促进着组织更快速实现价值.同时,诸如机器学习.数据预测分 ...
- .net core系列之《将.net core应用部署到Ubuntu》
1.首先准备一个演示项目. 2.然后将这个项目用FileZilla工具上传到Ubuntu中. 3.进入目标文件,接下来有两种方法来部署项目 a.用dotnet run命令 root@hhz-virtu ...
- asp.net mvc4 小问题
最近在学习mvc4中间出现一些问题.留作记录.. 1.新建立的项目在vs2013中运行后会出现一个长轮询..这个叫browserLink 是vs2013中新加入的东西.至于更多解释.直接百度.. 关闭 ...
- Visual Staudio 2015 打开指定文件，定位到指定文件目录下
Visual Staudio 2015 项目定位文件位置 每次使用的Visual Staudio 2015 写代码的时候总是打开了.cs文件或xaml文件时, 还要手动去找该 文件位置,每次都要翻好大 ...
- chchc
---恢复内容开始--- 51CTO博客-原创IT文章分享平台 Logo 首页 文章 专家 专家博客 博客之星 推荐博客 我的博客 网站导航 学院 博客 下载 家园 论坛 CTO训练营 WOT 51C ...
- 沉淀，再出发：VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...