1.样式的引用
1.内部样式表
<style>
.two{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div></div>
<div class="two"></div>
2.内联样式
<div style="width:100px;height:100px;background: red"></div>
<div class="two"></div>
3.外部引用
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="test"></div>
</body>
外部创建一个css文件：
.test{
width:100px;
height:100px;
background:red;
}
2.路径
相对路径 相对于同级目录下的
绝对路径 图片的绝对地址 （最好不要使用）
<!-- 同级目录 -->
<img src="down.jpg" alt="">
<!-- 下一级目录 -->
<img src="images/location.png" alt="">
3.width和heigth的继承
1.子元素绝对定位,不会继承父元素的width
<style>
/* */
.parent{
width:100px;
height:100px;
background: red;
position: relative;
}
.child{
height:50px;
background: green;
position:absolute;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
1.png
2.子元素绝对定位,父元素没有heigth
<style>
.parent{
width:200px;
/* height:200px; */
background: red;
}
.child{
position:absolute;
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
1.png
4.bug
<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>
</head>
<body>
<div class="parent row">
<div class="child"></div>
</div>
</body>
<style>
/* 浪潮之巅 */
/*
margin重合的问题
*/
.one{
width:100px;
height:100px;
background:red;
margin-bottom: 150px;
}
.two{
margin-top: 100px;
width:100px;
height:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
1.png
5.表单
<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>
</body>
1.png
text,btn的区别
<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>
</head>
<body>
<!-- 输入框和按钮的区别 -->
<input type="text"> <br>
<input type="submit" class="btn">
<!-- <button type="submit">提交</button> -->
</body>
1.png
网友评论