HTML/CSS 设计一个网页
接下来我们通过 HTML/CSS 来创建一个简单的响应式网页。
在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/tryhtmlcss_website.htm
CSS 代码
* { box-sizing: border-box; } body { font-family: Arial; margin: 0; } .header { padding: 80px; text-align: center; background: #1abc9c; color: white; } .header h1 { font-size: 40px; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .navbar a.right { float: right; } .navbar a:hover { background-color: #ddd; color: black; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .side { -ms-flex: 30%; flex: 30%; background-color: #f1f1f1; padding: 20px; } .main { -ms-flex: 70%; flex: 70%; background-color: white; padding: 20px; } .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } .footer { padding: 20px; text-align: center; background: #ddd; } @media screen and (max-width: 700px) { .row { flex-direction: column; } } @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } }
尝试一下 »
HTML 代码
<div class="header"> <h1>菜鸟教程网页测试实例</h1> <p>创建一个页面。</p> </div> <div class="navbar"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#" class="right">链接</a> </div> <div class="row"> <div class="side"> <h2>关于我</h2> <h5>我的照片:</h5> <div class="fakeimg" style="height:200px;">这边插入图像</div> <p>关于我的介绍..</p> <h3>更多内容</h3> <p>我的更多内容</p> <div class="fakeimg" style="height:60px;">这边插入图像</div><br> <div class="fakeimg" style="height:60px;">这边插入图像</div><br> <div class="fakeimg" style="height:60px;">这边插入图像</div> </div> <div class="main"> <h2>标题</h2> <h5>副标题</h5> <div class="fakeimg" style="height:200px;">图像</div> <p>一些文本..</p> <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p> <br> <h2>标题</h2> <h5>副标题</h5> <div class="fakeimg" style="height:200px;">图像</div> <p>一些文本..</p> <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p> </div> </div> <div class="footer"> <h2>底部内容</h2> </div>
尝试一下 »
相关知识
【简单html静态网页代码】 制作一个简单HTML宠物网页（HTML CSS）
宠物网页设计教程：HTML、CSS与前端实战
【html网页设计】
前端实战：宠物网页设计与HTML/CSS/JS代码详解
HTML宠物网页设计教程
设计一个包含HTML、CSS和JavaScript代码的宠物领养系统网页界面
宠物狗大学生网页设计模板 静态HTML动物保护学生网页作业成品 DIV CSS动物主题静态网页
HTML网页制作——HTML+CSS宠物狗静态网页设计
宠物狗狗网站 网页设计 html源码 大作业
HTML宠物网站设计：拯救动物网页作业
网址: HTML/CSS 设计一个网页 https://m.mcbbbk.com/newsview1343821.html
| 上一篇: 面向对象的编程 （OOP） （第 |
下一篇: 【步骤图】自制狗饭~牛肉南瓜饭的 |
