一.css样式几种引入方法
①内部样式表 ②内联样式 ③外部样式
<!--内部样式表 -->
<style>
.two{
width:100px;
height:100px;
background:green;
}
</style>
<body>
<!-- 内联样式
不要写 不要写 不要写
-->
<div style="width:100px;height:100px;background: red"></div>
<div class="two"></div>
</body>
<!-- 外部样式表 -->
<link rel="stylesheet" href="[css/index.css](css/index.css)">
二.绝对路径与相对路径
<!--
路径:
相对路径
绝对路径 不要使用
-->
<!-- 同级目录 -->
<img src="[down.jpg](down.jpg)" alt="">
<!-- 下一级目录 -->
<img src="[images/location.png](images/location.png)" alt="">
三.宽，高继承
子元素绝对定位，不会继承父元素的width
<style>
/* 子元素绝对定位,不会继承父元素的width */
.parent{
width:100px;
height:100px;
background: red;
position: relative;
}
.child{
height:50px;
background: green;
position:absolute;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
四.margin小问题
①子元素作为父元素的第一个元素,给它margin-top,没用,
它的父元素会向下移动
<style>
/* 子元素作为父元素的第一个元素,给它margin-top,没用
它的元素向下移动
*/
.parent{
width:200px;
height:200px;
background:red;
}
.child{
margin-top: 50px;
width:100px;
height:100px;
background:green;
}
/*如何解决*/
.row:before{
content:"";
display: table;
}
</style>
<body>
<div class="parent row">
<div class="child"></div>
</div>
</body>
②margin设计重合问题
前一元素设置margin-bottom 后一元素设置margin-top 那个值大，就随较大的值变化
五.表单
<body>
<h4>一个简单的登录表单</h4>
<form >
<!-- 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" value="提交">
</div>
<div>
<!-- 技术要点:name值相同 -->
<h4>性别</h4>
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
</div>
<div>
<!-- type=checkbox 复合选框 -->
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">羽毛球
</div>
<div>
<!-- 下拉选框 -->
<select >
<option value="武昌区">武昌区</option>
<option value="洪山区" selected>洪山区</option>
<option value="青山区">青山区</option>
</select>
</div>
</form>
<textarea placeholder="请吐槽" cols="30" rows="10"></textarea>
<!-- 大于,空格,大于 的字符 -->
<div>< ></div>
六.输入框与按钮的区别
input是按钮的形态下,给border,padding不会改变它的width,height
<style>
*{margin:0;padding:0}
input{
border:1px solid #333;
width:100px;
height:40px;
}
.btn{
width:102px;
height:42px;
}
/* input是按钮的形态下,给border,padding不会改变它的width,height */
</style>
<body>
<!-- 输入框和按钮的区别 -->
<input type="text"> <br>
<input type="submit" class="btn">
<!-- <button type="submit">提交</button> -->
</body>
网友评论