本次编程共留了两个
第一个是将外边框设为0px,由于同一元素两边框相交处是斜线,于是神奇的一幕发生了...
它变成了,这样w(゚Д゚)w(原谅我扯淡般的胡诌【扶额】)
这个代码还是很简单的.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boder--</title>
<style>
#box{
height:0px;
width:0px;
border-color: #ff0000;
border-style: solid;
border-width: 100px;
border-bottom-color: #ffffff;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
另外一个编程就比较难了,在下想了很久,但还是感觉有一些缺陷,希望诸位看官能够予以补充~
要切的图片:
接下来是代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我无所畏惧!</title>
<style>
#box{
width: 555px;
border: 1px solid #000000;
padding: 0px 20px;
margin-top: 1px;
}
#top{
padding-bottom: 28px;
border-bottom: 1px #000000 dashed;
}
#div1{
font-size: 23px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
line-height: 44px;
color: #404646;
}
#div2{
font-size: 20px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
line-height: 54px;
color: #404646;
}
#div3{
font-size: 14px ;
color: #9b9b9b ;
line-height: 26px;
text-indent: 34px;
font-family: Arial, Helvetica, sans-serif;
}
#bottom{
font-size: 17px;
color: #404646;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 37px;
padding-top: 21px ;
margin-bottom:-6px;
}
</style>
</head>
<body>
<div id="box" style="margin: 1px 0px 1px 2px;">
<div id="top">
<div id="div1">动态新闻</div>
<div id="div2">掌握一门技术的重要性</div>
<div id="div3">掌握一门技术是未来生存的一块敲门砖,
掌握一门技术是未来生<br/>存的一块敲门砖,
掌握一门技术是未来生存的一块敲门砖</div>
</div>
<div id="bottom">
<div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
<div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
<div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
<div >![](dayuhao4.jpg)走进民企观摩学习与民企面对面 <br/></div>
</div>
</div>
</body>
</html>
网页展示图是这样的:
路漫漫而修远兮,感谢诸位忍着想打我的冲动看完了段胡话,接下来是彩蛋环节🐾
百度云链接:http://pan.baidu.com/s/1mikBTPY 密码:m8cs
(hhhh)
修改后链接:http://pan.baidu.com/s/1nvQ7yw5 密码:635b
事实证明,在开始编程之前,还是有必要把所有的学习视频都看一遍的【/(ㄒoㄒ)/~~】