Html+css出现问题集合
转载请注明出处https://blog.youkuaiyun.com/qq_35779070/article/details/104278038
1.怎么写进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/* text-align: center; */
}
span{
position: relative;
top: 100px;
left: 100px;
}
.big{
position: relative;
top: 100px;
left: 100px;
width: 100px;
height: 20px;
background: #ADD8E6;
border-radius: 25px ;
}
.small{
width: 80%;
height: 100%;
background-color: pink;
border-radius: 25px ;
}
</style>
</head>
<body>
<span id="">
80%
</span>
<div id="" class="big">
<div id="" class="small">
</div>
</div>
</body>
</html>
实现效果
2.怎么写侧边栏
- 怎么设置侧边栏中高度为百分之百？
// 设置html和body的height为100%。 - 怎么设置二级列表显示时一级列表自动下移位置
// 不设置一级列表 li 的高度 - 怎么让纯文字居中
// 水平居中：text-align
// 垂直居中：line-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.clearfix::after {
content: "";
display: block;
clear: both;
}
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
body{
min-width: 1200px;/*最小宽度*/
font-family: "Microsoft YaHei", "微软雅黑", "黑体", "宋体", Arial, sans-serif;
font-size: 12px;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
background: #999;
margin: 0 auto;
position: relative;
}
.container .title {
float: left;
width: 180px;
height: 100%;
background-color: #74b574;
}
.container .title .logo {
height: 150px;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.container .title .logo .img img {
width: 100px;
height: 100px;
}
.container .title .logo h3.text {
font-size: 20px;
color: #d8f906;
margin: 10px;
}
.container .title .liebiao{
background: #7cc17c;
width: 100%;
}
.container .title .liebiao li {
text-align: center;
list-style: none;
/* height: 35px; */
line-height: 35px;
}
.container .title .liebiao li a {
color: #ADD8E6;
text-decoration: none;
display: block;
}
.container .title .liebiao li dl {
display: none;
position: relative;
top: 0;
background: #74B574;
}
.container .title .liebiao li:hover dl {
display: block;
}
.container .content {
float: left;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="title">
<div class="logo">
<div class="img">
<img src="img/l3.jpg" alt="">
</div>
<h3 class="text">夏目友人帐</h3>
</div>
<ul class="liebiao">
<li>
<a href="#">
夏目友人帐第一季
</a>
<dl>
<dd><a href="#">第一话</a></dd>
<dd><a href="#">第一话</a></dd>
<dd><a href="#">第一话</a></dd>
</dl>
</li>
<li><a href="#">夏目友人帐第二季</a></li>
<li><a href="#">夏目友人帐第三季</a></li>
<li><a href="#">夏目友人帐第四季</a></li>
<li><a href="#">夏目友人帐第五季</a></li>
<li><a href="#">夏目友人帐第六季</a></li>
</ul>
</div>
<div class="content">
</div>
</div>
</body>
</html>
效果图
3.怎么实现部分内容滑动效果
- 总是会出现滚动条不好使的情况，如何解决？
// 目前想到的办法是给部分内容设置固定高度，但是这个应该不太对，待研究。。。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
min-width: 1200px;
background: #74B574;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.container .top {
background: #999;
padding: 10px 20px;
}
.container .top .square {
background: #777;
width: 50px;
height: 35px;
border-radius: 6px;
padding: 5px;
box-sizing: border-box;
}
.container .top .square .square-item {
height: 4px;
width: 35px;
background: #fff;
margin: 3px;
border-radius: 2px;
}
.container .banner {
background: #b1b1b1;
padding: 10px 20px;
}
.container .banner .square {
background: #777;
width: 50px;
height: 35px;
border-radius: 6px;
padding: 5px;
box-sizing: border-box;
}
.container .banner .square .square-item {
height: 4px;
width: 35px;
background: #fff;
margin: 3px;
border-radius: 2px;
}
.container .nav {
background: #d8d8d8;
padding: 10px 20px;
}
.container .nav .square {
background: #777;
width: 50px;
height: 35px;
border-radius: 6px;
padding: 5px;
box-sizing: border-box;
}
.container .nav .square .square-item {
height: 4px;
width: 35px;
background: #fff;
margin: 3px;
border-radius: 2px;
}
.container .content{
position: absolute;
top: 165px;
left: 0;
right: 0;
width: 100%;
height: 500px;
overflow-y: auto;
}
.container .content p{
text-indent: 2em;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="square">
<div class="square-item"></div>
<div class="square-item"></div>
<div class="square-item"></div>
</div>
</div>
<div class="banner">
<div class="square">
<div class="square-item"></div>
<div class="square-item"></div>
<div class="square-item"></div>
</div>
</div>
<div class="nav">
<div class="square">
<div class="square-item"></div>
<div class="square-item"></div>
<div class="square-item"></div>
</div>
</div>
<div class="content">
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ullam hic odit. Adipisci dolores
accusantium laboriosam quaerat debitis quidem natus accusamus nihil harum tenetur beatae magni omnis optio
officiis rerum!</span>
<span>Veritatis eum quibusdam excepturi provident exercitationem deserunt veniam. Deserunt voluptatem a nostrum
dignissimos quas porro perspiciatis animi laudantium quasi quaerat laboriosam nam repudiandae eius vitae
obcaecati odit accusamus libero dicta.</span>
<span>Ullam officia ducimus ex error amet suscipit maiores quae quos quas eius quisquam architecto assumenda
voluptatum itaque fuga expedita tempora sequi iure a vero alias atque laudantium aperiam odit cum.</span>
<span>Est dolores nulla laudantium nisi. Modi in sit iste vero fuga rerum porro odit saepe suscipit dignissimos
repellat dolorem iure sed harum accusantium unde temporibus velit sapiente reiciendis omnis delectus.</span>
<span>Doloribus voluptatum voluptatibus perferendis inventore neque! In voluptatibus ab sint necessitatibus
commodi neque repellendus! Expedita nihil dolorum quos a vitae quidem molestias tenetur ea atque quia ducimus ab
repellat eius.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ullam hic odit. Adipisci dolores
accusantium laboriosam quaerat debitis quidem natus accusamus nihil harum tenetur beatae magni omnis optio
officiis rerum!</span>
<span>Veritatis eum quibusdam excepturi provident exercitationem deserunt veniam. Deserunt voluptatem a nostrum
dignissimos quas porro perspiciatis animi laudantium quasi quaerat laboriosam nam repudiandae eius vitae
obcaecati odit accusamus libero dicta.</span>
<span>Ullam officia ducimus ex error amet suscipit maiores quae quos quas eius quisquam architecto assumenda
voluptatum itaque fuga expedita tempora sequi iure a vero alias atque laudantium aperiam odit cum.</span>
<span>Est dolores nulla laudantium nisi. Modi in sit iste vero fuga rerum porro odit saepe suscipit dignissimos
repellat dolorem iure sed harum accusantium unde temporibus velit sapiente reiciendis omnis delectus.</span>
<span>Doloribus voluptatum voluptatibus perferendis inventore neque! In voluptatibus ab sint necessitatibus
commodi neque repellendus! Expedita nihil dolorum quos a vitae quidem molestias tenetur ea atque quia ducimus ab
repellat eius.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ullam hic odit. Adipisci dolores
accusantium laboriosam quaerat debitis quidem natus accusamus nihil harum tenetur beatae magni omnis optio
officiis rerum!</span>
<span>Veritatis eum quibusdam excepturi provident exercitationem deserunt veniam. Deserunt voluptatem a nostrum
dignissimos quas porro perspiciatis animi laudantium quasi quaerat laboriosam nam repudiandae eius vitae
obcaecati odit accusamus libero dicta.</span>
<span>Ullam officia ducimus ex error amet suscipit maiores quae quos quas eius quisquam architecto assumenda
voluptatum itaque fuga expedita tempora sequi iure a vero alias atque laudantium aperiam odit cum.</span>
<span>Est dolores nulla laudantium nisi. Modi in sit iste vero fuga rerum porro odit saepe suscipit dignissimos
repellat dolorem iure sed harum accusantium unde temporibus velit sapiente reiciendis omnis delectus.</span>
<span>Doloribus voluptatum voluptatibus perferendis inventore neque! In voluptatibus ab sint necessitatibus
commodi neque repellendus! Expedita nihil dolorum quos a vitae quidem molestias tenetur ea atque quia ducimus ab
repellat eius.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ullam hic odit. Adipisci dolores
accusantium laboriosam quaerat debitis quidem natus accusamus nihil harum tenetur beatae magni omnis optio
officiis rerum!</span>
<span>Veritatis eum quibusdam excepturi provident exercitationem deserunt veniam. Deserunt voluptatem a nostrum
dignissimos quas porro perspiciatis animi laudantium quasi quaerat laboriosam nam repudiandae eius vitae
obcaecati odit accusamus libero dicta.</span>
</p>
</div>
</div>
</body>
</html>
效果图
4.Tip
-
可以使用浮动解决的问题，尽量不要用定位；定位尽量不要使用绝对和固定，当出现问题时，从里向外剖析。
-
margin 和 padding 的区别：
元素默认是内容盒，box-sizing:content-box
内容盒的意思是不包括margin、padding、border等// margin：两个元素之间的距离
// padding：一个元素的内容与边框之间的距离
若是真正用padding，则要设置box-sizing:border-box。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{
width: 500px;
height: 400px;
background: #d8d8d8;
margin-top:30px;
margin-left:30px;
padding-top: 40px;
}
.small1{
width: 100px;
height: 100px;
background: #74B574;
text-align: center;
box-sizing: border-box;
padding: 30px;
margin-bottom: 20px;
}
.small2{
width: 200px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="big">
<div class="small1">
最棒
</div>
<div class="small2">
哈哈
</div>
</div>
</body>
</html>
效果图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
