day07
2018-07-17 本文已影响0人
吴_群
1.样式的引入
- 内联样式表
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
- 内联样式 ---<不要写>
<div style="width:100px; height:200px; background:green;"></div>
- 外部样式表
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="test"></div>
</body>
2.路径
路径
- 相对路径
- 绝对路径 不要用
- 上级目录
- 同级目录
<img src="images/02.png" alt="相对路径">
<img src="D:\project\练习day7\Notebook\images\about.jpg" alt="绝对路径">
<img src="../images/about.jpg" alt="上级目录">
<img src="02.png" alt="同级目录">
3.margin
- 子元素作为父元素的第一个元素，给它margin-top，没用它的元素向下移动
/*如何解决 加伪元素*/
.row:before{
content: "";
display: table;
}
- margin 重合,相同取中间,不同取最大
<div class="one"></div>
<div class="two"></div>
.one{
width: 100px;
height: 100px;
background: red;
margin-bottom: 100px;
}
.two{
width: 100px;
height: 100px;
background: blue;
margin-top: 200px;
}
4.表单
- 登录 <h4>一个简单的登录表单</h4>
label和input结合应用label的for的值要和input的id一样
<div>
<label for="user">用户名</label><input type="text" id="user">
</div>
<div>
<label for="pwd">密码</label><input type="password" id="pwd">
</div>
<div>
<input type="submit" id="提交">
</div>
- 单选框 技术要点:name值相同
<h4>性别</h4>
<div>
</form><label for="male">男</label><input type="radio" id="male" name="sex">
</form><label for="female">女</label><input type="radio" id="female" name="sex">
</div>
- type=checkbox 复合选框
<div>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">羽毛球
</div>
- 下拉选框
<div>
<select>
<option value="武昌区">武昌区</option>
<option value="洪山区" selected>洪山区</option>
<option value="青山区">青山区</option>
</select>
</div>
- 文本域
<textarea placeholder="请吐槽" id="30" cols="30" rows="10"></textarea>
- 特殊符号
小于；空格；大于
<div>< ></div>
