HTML+CSS3+Bootstrap第一章例子大全

纯手打，请大家多多支持（拱手

例1-1选择器的使用

例1-2盒子模型

项目1-1三栏定位

例1-3圆角区域

编辑例1-4特殊边框效果

例1-5对象阴影

例1-6线性渐变

例1-7径向渐变

项目1-2许愿墙

例1-1选择器的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器的使用</title><style>nav{width: 300px;}li{background-color: rgba(0, 0, 0, 0.4);height: 35px;line-height: 35px;overflow: hidden;}li:nth-of-type(2n){background-color: rgba(0, 0, 0, 0.5);}li:hover{background-color: #0099E5;}a{text-align: center;display: block;color: #fff;height: 35px;padding: 0 38px;}}</style></head><body><nav><ul><li><a href="#">Java EE教程</a></li><li><a href="#">Android教程</a></li><li><a href="#">PHP教程</a></li><li><a href="#">UI教程</a></li><li><a href="#">ios教程</a></li><li><a href="#">web前端教程</a></li><li><a href="#">C/C++教程</a></li></ul></nav></body>
</html>

运行效果：

例1-2盒子模型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.div1{background-color: #eee;width: 200px;height: 200px;margin-top: 50px;border: 1px solid #000;padding: 10px;}</style></head><body><div class="div1">盒子模型</div></body>
</html>

运行效果：

项目1-1三栏定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>三栏布局</title><style>html,body,h4,p{padding: 0;margin: 0;text-align: center;font-size: 16px;}header,footer{height: 25px;
}
.main{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;padding: 0 -100PX;
}
.left{background-color: #eee;width: 100PX;position: absolute;left:0;
}
.middle{background-color: #ddd;
}
.right{background-color: #eee;width: 100px;position: absolute;right: 0;
}
.left,.right,.middle{height: 199px;
}
</style></head><body><header><h4>头部区域</h4></header><div class="main"></div><div class="main"><aside class ="left"><p>左侧边栏</p></aside><aside class ="right"><p>右侧边栏</p></aside><section class="middle"><p>内容区域</p></section></div><footer><p>底部区域</p></footer></body>
</html>

运行效果：

例1-3圆角区域

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3圆角边框</title><style>section{padding: 10px;
}
div{display: inline-block;padding: 15px 25px ;text-align: center;font-size: 16px;border: 2px solid #000;color:#000;background-color: #eee;border-radius: 12px;
}
</style></head><body><section><div>圆角边框</div></section></body>
</html>

运行效果：

例1-4特殊边框效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>特殊边框效果</title><style>body{padding: 0;background-color: #f7e7f7;}div{margin: 20px;float: left;}.border-radius{width: 40px;height: 40px;border:70px solid #93baff;border-radius: 90px;}.border-radiusl{width: 0px;height: 0px;border-width:90px ;border-style:solid;border-color: #ff898e #93baff #c89386 #ffb151;}</style></head><body><div class="border-radius"></div><div class="border-radiusl"></div></body>
</html>

运行效果：

例1-5对象阴影

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>对象阴影</title><style>.box{box-shadow: 7px 4px 10px #000 inset;width: 300px;height: 30px;}.box1 img {box-shadow: #000 7px 4px 10px;}</style></head><body><h3>盒子对象阴影测试</h3><div class="box">盒子内阴影</div><h3>盒子对象内阴影测试</h3><div class="box1"><img src="./166774.jpg"/></div></body>
</html>

运行效果：

例1-6线性渐变

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS3线性渐变</title><style>.rainbow-linear-gradient{width: 460px;height: 160px;background-image: linear-gradient(to right,#E57043 0%,#F9870F 15%,#E8ED30 30%,#3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);}</style></head><body><div class="rainbow-linear-gradient"></div></body>
</html>

运行效果：

例1-7径向渐变

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS3径向渐变</title><style>.rainbow-radial-gradient{width: 300px;height: 300px;background-image: radial-gradient(100px,#ffe07b 15%,#ffb151 2%,#16104b 50%);}</style></head><body><div class="rainbow-radial-gradient"></div></body>
</html>

运行效果：

项目1-2许愿墙

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>许愿墙</title><style>*{margin: 0;padding: 0;
}.container{width: 1150px;height: 440px;background-image: linear-gradient(#B6E8DB,#15B0C9);padding: 200px 153px 200px 150px;
}
.item{width: 300px;height: 350px;float: left;margin: 0 20px;padding: 20px;box-shadow: 0 2px 10px 1px #7F7F7F;border-bottom-left-radius: 20px 500px;border-bottom-right-radius: 500px 30px;border-top-right-radius: 5px 100px;
}
p{margin: 50px 30px;font-size: 30px;font-family: "中文楷体";font-weight: 900;text-align: left;
}
span{color: white;position: relative;left: 220px;top: 120px;font-size: 14px;
}</style></head><body><div class="container"><div class="item" style="background:#E3E197"><p>“昨夜西风凋碧树。独上高楼，望尽天涯路。”</p><span>关闭</span></div><div class="item" style="background: #F8B3D0;"><p>“衣带渐宽终不悔，为伊消得人憔悴。”</p><span>关闭</span></div><div class="item" style="background: #BBE1F1;"><p>“众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。”</p><span>关闭</span></div></body>
</html>

运行效果：