|
|
@@ -0,0 +1,172 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* 内部样式 */
|
|
|
+ p{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <!-- 外部样式 -->
|
|
|
+ <link rel="stylesheet" href="1_test.css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ 基础标签：
|
|
|
+ h1-h6 标题
|
|
|
+ p 段落
|
|
|
+ img 图片
|
|
|
+ a 超链接
|
|
|
+ ul li 列表
|
|
|
+ div 区块 用来布局
|
|
|
+ span 文本内容
|
|
|
+ b 加粗
|
|
|
+ i 斜体
|
|
|
+
|
|
|
+ 表格
|
|
|
+ table
|
|
|
+ tr
|
|
|
+ td
|
|
|
+
|
|
|
+ 表单
|
|
|
+ 文本框
|
|
|
+ <input type="text">
|
|
|
+ 密码框
|
|
|
+ <input type="password">
|
|
|
+ 单选框
|
|
|
+ <input type="radio">
|
|
|
+ 复选框
|
|
|
+ <input type="checkbox">
|
|
|
+ 下拉框
|
|
|
+ select
|
|
|
+ option
|
|
|
+ 文本域
|
|
|
+ textarea
|
|
|
+ 提交按钮
|
|
|
+ <input type="submit">
|
|
|
+ 普通按钮
|
|
|
+ <input type="button">
|
|
|
+
|
|
|
+ css样式
|
|
|
+ 1、引入css
|
|
|
+ 内联样式
|
|
|
+ 内部样式
|
|
|
+ 外部样式
|
|
|
+
|
|
|
+ 2、css 选择器
|
|
|
+ 标签选择器
|
|
|
+ div{
|
|
|
+
|
|
|
+ }
|
|
|
+ id选择器(id唯一的)
|
|
|
+ #xxx{
|
|
|
+
|
|
|
+ }
|
|
|
+ class 类选择器
|
|
|
+ .aa{
|
|
|
+
|
|
|
+ }
|
|
|
+ 后代选择器
|
|
|
+ #ul1 .aa{
|
|
|
+
|
|
|
+ }
|
|
|
+ 分组选择器|群组选择器
|
|
|
+ #ul1 .aa, #xxx{
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ 伪类选择器
|
|
|
+ a:hover{
|
|
|
+
|
|
|
+ }
|
|
|
+ 3、基础样式
|
|
|
+ 宽高 背景
|
|
|
+ width:200px;
|
|
|
+ height:200px;
|
|
|
+ background
|
|
|
+ -color:red; 颜色
|
|
|
+ -image:url(xx.jpg); 图片
|
|
|
+ -repeat:no-reprat|repeat; 不重复|重复
|
|
|
+ -posiotn:0 0; 位置：水平（固定值|left|center|right） 垂直(固定值|top|center|bottom)
|
|
|
+
|
|
|
+ 简化为：
|
|
|
+ background:red url(xx.jpg) no-reprat 0 0;
|
|
|
+
|
|
|
+ 字体 相关
|
|
|
+ font
|
|
|
+ -size:12px 字体大小 （默认字体大小16px 设置最小字体大小12px）
|
|
|
+ -family:字体
|
|
|
+ -weight:400; 字体粗细 100-900 （默认400 ）
|
|
|
+ style:italic|normal 斜体|正常
|
|
|
+
|
|
|
+ color:red; 文字颜色
|
|
|
+
|
|
|
+ 文本相关属性
|
|
|
+ text-align:left |right|center; 文本水平对齐
|
|
|
+ line-height:height ;单行文本垂直居中
|
|
|
+ text-decoration: underline 下划线|none没有 |line-through中划线
|
|
|
+ text-indent:20px; 首行缩进
|
|
|
+
|
|
|
+ 列表
|
|
|
+ list-style:none;去掉列表前边的点
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ -->
|
|
|
+
|
|
|
+ <select name="" id="">
|
|
|
+ <option value="">黑大</option>
|
|
|
+ <option value="">理工</option>
|
|
|
+
|
|
|
+ </select>
|
|
|
+ <input type="submit">
|
|
|
+
|
|
|
+ <input type="button" value="确定">
|
|
|
+
|
|
|
+ <input type="reset">
|
|
|
+ <!-- 内联样式 -->
|
|
|
+ <div style="width:200px; height:200px; background:red"></div>
|
|
|
+ <h1 id="xxx"></h1>
|
|
|
+
|
|
|
+ <ul id="ul1">
|
|
|
+ <li></li>
|
|
|
+ <li class="aa"></li>
|
|
|
+ <li></li>
|
|
|
+ <li class="aa"></li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li></li>
|
|
|
+ <li class="aa"></li>
|
|
|
+ <li></li>
|
|
|
+ <li class="aa"></li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+</body>
|
|
|
+</html>
|
dongxiuling