红绿灯效果
使用HTML+CSS实现如图所示的红绿灯效果。
从图中我们可以知道有三个不同颜色的圆，并且三个圆都在灰色矩阵之中
<style> * { margin: 0; padding: 0; box-sizing: border-box; } .parent { width: 200px; height: 600px; margin: 0 auto; background-color: gray; padding: 25px; } .one,.two,.three { width: 150px; height: 150px; border-radius: 50%; } .one { background-color: red; } .two { background-color: green; margin-top: 50px; /* 50px为上下两个圆的边距 */ } .three { background-color: yellow; margin-top: 50px; } </style> <div class="parent"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> 横向布局基于 flex 布局来实现横向布局
实现效果如图所示：
图中布局分为四个小部分，我们可以使用flex布局来实现
<style> * { margin: 0; padding:0; box-sizing: border-box; } .parent { background-color: gray; } .nav { background-color: red; color: white; text-align: center; height: 50px; line-height: 50px; font-size: 20px; } .body { display: flex; } .content { width: 80%; height: 500px; background-color: gray; color: white; text-align: center; font-size: 20px; line-height: 500px; } .left, .right { width: 20%; height: 500px; background-color: green; color: white; text-align: center; font-size: 20px; line-height: 500px; } </style> <div class="parent"> <div class="nav">我是导航区</div> <div class="body"> <div class="left">我是左边栏</div> <div class="content">我是内容区</div> <div class="right">我是右边栏</div> </div> </div> 考试表单页考试表单页CSS样式制作 实现效果如图所示： HTML5.html
<h1>HTML测试一 <button class="one"> <!-- tagget设置新窗口打开 --> <span><a target="_blank" style=text-decoration:none href="css3.html"><div class="two">同学1的测试页</div> </a></span> </button> <button class="one"> <span><a style=text-decoration:none href="css3.html"><div class="two">同学2的测试页</div> </a></span> </button> </h1> <p> 学号：<input type="text" name="xh"> 姓名：<input type="text" name="xm"> 班级： <select> <option>2020级软件一班</option> <option>2020级软件二班</option> <option>2020级软件三班</option> <option>2020级软件四班</option> <option>2020级软件五班</option> </select> </p> <thead> <h5>一.单选题</h5> <tr> <td><P>1.根据选择器表示所修饰的内容类别，CSS选择器分为标签选择器、（ ）、ID选择器。</P></td> <td> <input type="radio">A. 元素选择器 </td> <td><input type="radio">B. 类选择器</td> <td><input type="radio">C.图片选择器</td> <td><input type="radio">D.文字选择器</td> <td><p>2.下列的HTML中哪个是最大的标题？</p></td> <td><input type="radio">A.<h6></td> <td><input type="radio">B.<h3></td> <td><input type="radio">C.<h4></td> <td><input type="radio">D.<h1></td> </tr> <h5>二.多选题</h5> <tr> <td><p>1.下面是html5新增的元素的是（）</p></td> <td> <input type="checkbox" id="front"> <label for="front">li</label> <input type="checkbox" id="backend"> <label for="backend">iframe</label> <input type="checkbox" id="test"> <label for="test">charset</label> <input type="checkbox" id="test2"> <label for="test2">section</label> <input type="checkbox" id="test3"> <label for="test3">aside</label> </td> <td><p>2.我们不可以在下列哪个HTML元素中放置JavaScript代码？</p></td> <td> <input type="checkbox" id="front"> <label for="front"><script></label> <input type="checkbox" id="backend"> <label for="backend"><javascript></label> <input type="checkbox" id="test"> <label for="test"><js></label> <input type="checkbox" id="test2"> <label for="test2"><scripting></label> </td> </tr> <h5>三.填空题</h5> <tr> <td>1.在HTML中，标记＜font＞的Size属性最大取值可以是:<input type="text" name="qz"> </td> <td><p>2.不用发布就可以在本地计算机上浏览的页面编写语言是:<input type="text" name="qz"> </p></td> </tr> <h5>四.判断题</h5> <tr> <td>1.超文本标记语言就是HTML。</td> <td><p><input type="radio">对<input type="radio">错</p></td> <td>2.Web 标准的制定者是微软公司。</td> <td><p><input type="radio">对<input type="radio">错</p></td> </tr> <h5>五.简答题</h5> <tr> <td><p>1.前端页面有哪三层构成，分别是什么?</p></td> <td> <textarea cols="50" rows="5"></textarea> </td> <td><p>2.HTML与CSS之间的区别</p></td> <td> <textarea cols="50" rows="5"></textarea> </td> </tr> </thead> <p> <a href="web.html"> <button>提交试卷</button> </a> </p>test.css
body{ /* 加载背景图 */ background:url(tp.webp) no-repeat center center; /* 让背景图基于容器 */ background-size:70%; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-attachment:fixed; /* 设置背景颜色，背景图加载过程中会显示背景色 */ background-color:#CCCCCC; /* 背景图片不重复 */ background-repeat: no-repeat; } h3 { color: rgba(0, 204, 255, 0.685); } .one { background-color:rgba(0, 204, 255, 0.685); } .button { color: red; } .two { text-decoration: none; color: #eee; }
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |