使用HBuilder制作一个简单的HTML5网页 |
您所在的位置:网站首页 › 网页介绍怎么写 › 使用HBuilder制作一个简单的HTML5网页 |
使用HBuilder制作一个简单的HTML5网页
写在前面:开始入门网页制作,写下第一篇博文作为记录。纯纯小白一个,如有阅览者,欢迎批评指正!❤ 先放上效果图: 使用HBuilderX编辑器创建一个“基本HTML项目”: 解读: 第1行代码是一个声明,告诉 Web 浏览器当前页面应该使用哪个HTM版本进行解析。 < html >标签是整个页 的最外层围墙,用来“包裏”页面的所有内容。 < head >标签相当于我面的身份证,包括了页面的所有重要信息,这一部分内容不会呈现在页面上,浏览者不能直接看到。 < body >部分是页面的主体部分,包含了所有在浏览器上要呈现的内容信息,也就是浏览者可以着到的内容。 在< body >标签内加入标题和内容: 标题使用<h1>标签, 内容使用< p >标签, 按钮使用< div >标签。 这里,由于< body > 标签里的元素是散乱的,所以需要< div >标签充当一个“透明的盒子”,将元素收纳在盒子内部。可以使用class属性给< div >标签增加类名以作区分。 Let's start our first page! 欢迎大家来到LinWit的制作的网页, 一起开启精彩的世界吧! start接下来主要是在页面中使用CSS进行界面的设计与美化,这里需要在< head >标签中新建一个< style > 标签,页面中的标签都放在< style >标签内部。 (具体见文末完整代码) 一些CSS设计的“出彩点”: 页面动态效果:当鼠标移动到按钮上时,让按钮的形态发生变化。及在按钮选择器后面加上:hover,表示鼠标移动到按钮上的状态。 .btn:hover{ background-color: royalblue; width: 300px; height: 100px; line-height: 100px; font-size: 36px; margin: 100px auto; }当鼠标放上按钮时,变化效果如下: 在手机(不同屏幕大小的设备)上查看页面样式如下(一些布局都进行了相应的变化): 最后附上一个简单的网页界面的代码: DOCTYPE html> Document html,body{ height:100%; margin:0; padding:0; } body{ background: red url(img/index.jpg) center center; background-size: cover; position: relative;/* 相对位置 */ } .container{ position: absolute;/* 绝对位置 */ top: 50%; text-align: center; width: 100%; transform: translateY(-50%);/* 将div元素上移至自身高度的50% */ } h1{ line-height: 90px; color: royalblue; font-size: 50px; } p{ line-height: 80px; color: royalblue; font-size: 22px; } .btn{ width: 200px; height: 60px; background-color: #7cacae; color: #fff; font-size: 24px; line-height: 60px; margin: 30px auto;/* 设置其上下边距:30px 左右边距:自动 */ border-radius: 10px;/* 给按钮增加圆角样式 */ transition: 1s; } .btn:hover{ background-color: royalblue; width: 300px; height: 100px; line-height: 100px; font-size: 36px; margin: 100px auto; } Let's start our first page! 欢迎大家来到LinWit的制作的网页, 一起开启精彩的世界吧! start完事!😀 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |