HTML前端静态网页制作
2024-04-06 11:36:51
在制作网页之前，首先先分析网页是那些部分组成，可以从以下的代码看出，分为头部、导航栏、logo部分、文字部分等等这些组成。多的不说，直接上代码，本次静态网页代码分为html和css部分。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="网页.css">
</head>
<body><!-- 头部部分 --><div id="haeder"><!-- 导航栏部分 --><div id="nav"><!-- logo部分 --><div id="logo"><img src="logo.png" alt=""></div><!-- 文字部分 --><div id="words"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 输入框部分 --><div id="search"><input type="text" value="请输入文字"><button></button></div><!-- user部分 --><div id="user"><img src="user.png" alt="">qq lilei</div></div></div><!-- banner部分 --><div id="banner"><!-- 在cont里面插入图片 --><div id="cont"><!-- 侧导航栏 --><div id="work"><ul><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li><li><a href="#">前端开发 ></a></li></ul></div><!-- 右边表格 --><div id="biaoge"><div id="biao1"><p>我的课程</p></div><div id="biao2"><p>继续学习 程序语言设计</p><p id="op">学习使用对象</p><hr></div><div id="biao2"><p>继续学习 程序语言设计</p><p id="op">学习使用对象</p><hr></div><div id="biao2"><p>继续学习 程序语言设计</p><p id="op">学习使用对象</p><hr></div><div id="biao3"><p>全部课程</p></div></div></div></div><!-- 横向栏 --><div id="transverse"><div id="w"><ul><li><a href="#" id="io">精品推荐</a></li>|<li><a href="#">JQuery</a></li>|<li><a href="#">JQuery</a></li>|<li><a href="#">JQuery</a></li>|</ul></div><div id="youbian"><a href="#">修改兴趣</a></div></div><!-- 结尾部分 --><div id="ending"><div id="word1"><a href="#" id="zuo">精品推荐</a></div><div id="word2"><a href="#" id="you">查看全部</a></div></div><!-- 图片部分 --><div id="pic"><!-- 图片1 --><div id="pic1"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片2 --><div id="pic2"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片3 --><div id="pic3"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片4 --><div id="pic4"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片5 --> <div id="pic5"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片6 --><div id="pic6"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片7 --><div id="pic7"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片8 --><div id="pic8"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片9 --><div id="pic9"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div><!-- 图片10 --><div id="pic10"><img src="pic.png" alt=""><p>Think PHP 5.0 博客系统实战项目演练</p><a href="#" id="cc">高级</a><p id="dd">1125人在线学习</p></div></div><!-- 最后结尾部分 --><div id="last"><!-- 左边内容部分 --><div id="last1"><br><br><img src="logo.png" alt=""><br><br><p>学成在线致力于普及中国最好的教育它与中国一流的大学和机构合作提供在线课程@2021 Baidu 使用百度前必读|百科协议|隐私政策|百度百科合作平台|京】CP证030173号</p><div id="box"><a href="#">下载APP</a></div></div><!-- 右边内容部分 --><div id="box2"><!-- 右边内容部分一 --><div id="last2"><div><a href="#" id="yanse">关于学成网</a><ul><li><a href="#">关于</a></li><li><a href="#">管理团队</a></li><li><a href="#">工作机会</a></li><li><a href="#">客服服务</a></li><li><a href="#">帮助</a></li></ul></div></div><!-- 右边内容部分二 --><div id="last3"><div><a href="#" id="yanse">关于学成网</a><ul><li><a href="#">关于</a></li><li><a href="#">管理团队</a></li><li><a href="#">工作机会</a></li><li><a href="#">客服服务</a></li><li><a href="#">帮助</a></li></ul></div></div><!-- 右边内容三 --><div id="last4"><div><a href="#" id="yanse">关于学成网</a><ul><li><a href="#">关于</a></li><li><a href="#">管理团队</a></li><li><a href="#">工作机会</a></li><li><a href="#">客服服务</a></li><li><a href="#">帮助</a></li></ul></div></div></div></div>
</body>
</html> 在css部分，每一个小部分都写有注释，可能写得不太好，仅供参考。
/* 设置a标签样式 */
a{font-size: 19px;text-decoration: none;
}
/* 鼠标点击样式 */
a:hover{border-bottom: 2px solid #00a4ff;color: #00a4ff;
}
body{margin: auto;width: 1920px;background-color: rgb(245, 238, 238);
}
*{margin: 0;padding: 0;
}
/* 设置头部部分 */
#haeder{height: 100px;margin: auto;/* background-color: paleturquoise; */
}
/* 设置导航栏样式 */
#nav{width: 1200px;height: 100px;margin-left: 180px;/* background-color: rgb(250, 241, 240); */
}
/* logo样式 */
#logo{/* float: left; */display: inline-block;height: 100px;width: 200px;padding-top: 30px;
}
/* 设置words */
#words{margin-top: 30px;/* float: left; */display: inline-block;margin-left: 50px;
}#words ul li{display: inline-block;
}
#words ul li a{height: 30px;padding: 0 20px;line-height: 20px;
}
/* 输入框样式 */
#search{margin-top: 30px;display: inline-block;margin-left: 30px;
}
/* 设置输入框样式 */
#search input{float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
/* 设置搜索样式 */
#search button{width: 50px;height: 42px;background-color: blue;border: 0;background: url(btn.png);
}
/* 搜索图标 */
#user{float: right;margin-top: 30px;margin-right: 60px;
}
/* 设置banner样式 */
#banner{height: 400px;background-color: #1c036b;
}
/* 设置cont图片样式 */
#cont{width: 1200px;height: 400px;margin-left: 180px;background: url(banner2.png);
}
/* 侧导航栏部分 */
#work{display: inline-block;padding-top: 20px;height: 380px;width: 200px;line-height: 40px;background-color: rgba(19, 2, 75, 0.5);
}
/* 清除work ul圆点标记 */
#work ul{list-style: none;
}
/* 设置li标签中文字间隔 */
#work ul li{padding-left: 30px;
}
/* 设置work里面a标签文字颜色 */
#work ul li a{color: white;
}
/* 右边表格部分 */
#biaoge{margin-top: 20px;float: right;height: 320px;width: 230px;background-color: white;
}
#biao1{padding-top: 10px;height: 40px;width: 150px;padding-left: 80px;border-bottom: 1px solid black;
}
#biao2{padding-left: 20px;padding-top: 20px;padding-bottom: 20px;height: 40px;
}
/* 设置学习使用对象字体颜色 */
#op{color: darkgrey;
}
#biao3{padding-left: 80px;height: 40px;border: 1px solid rgb(13, 113, 245);
}
/* 横向导航栏 */
#transverse{width: 1200px;height: 50px;margin-left: 180px;background-color: white;box-shadow: 5px 5px rgb(128, 128, 128,0.3);
}
/* 设置横向栏中w的样式 */
#w{padding-top: 10px;display: inline-block;height: 50px;width: 600px;
}
#transverse ul li{display: inline-block;
}
/* 设置transverse a标签 */
#transverse ul li a{text-align: center;line-height: 30px;height: 30px;padding: 0 20px;
}
/* 设置精品推荐颜色 */
#io{color: aqua;
}
/* 设置修改兴趣样式 */
#youbian{float: right;padding-right: 50px;padding-top: 10px;
}
/* 设置结尾 */
#ending{margin-top: 20px;width: 1200px;height: 25px;margin-left: 180px;/* background-color: royalblue; */
}
/* 修改精品推荐 */
#word1{padding-left: 35px;float: left;
}
/* 修改查看全部 */
#word2{padding-right: 35px;float: right;
}
/* 图片部分 */
#pic{height: 600px;width: 1200px;margin-left: 180px;
}
/* 修改高级及1125人在线学习为行内块模式 */
#cc,#dd{display: inline-block;
}
/* 修改高级字体的颜色 */
#cc{color: rgb(241, 245, 19);
}
/* 修改1125在线学习字体的颜色 */
#dd{color: rgb(119, 116, 118);
}
/* 修改图片大小 */
#pic img{height: 200px;width: 200px;float: left;
}
/* 图片1部分 */
#pic1{margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片2部分 */
#pic2{margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;}
/* 图片3部分 */
#pic3{margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片4部分 */
#pic4{margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片5部分 */
#pic5{margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片6部分 */
#pic6{margin-top: 35px;margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片7部分 */
#pic7{margin-top: 35px;margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片8部分 */
#pic8{margin-top: 35px;margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片9部分 */
#pic9{margin-top: 35px;margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 图片10部分 */
#pic10{margin-top: 35px;margin-left: 35px;float: left;height: 280px;width: 200px;background-color: white;
}
/* 最好结尾部分 */
#last{height: 250px;background-color: white;
}
/* 给结尾部分p标签设置字体 */
#last p{font-size: 15px;
}
/* 设置左边内容样式 */
#last1{display: inline-block;margin-left: 209px;display: inline-block;height: 250px;width: 600px;
}
/* 下载APP盒子样式 */
#box{margin-top: 10px;padding-top: 15px;padding-left: 15px;margin-left: 10px;height: 40px;width: 100px;border: 2px solid lightskyblue;
}
/* 设置下载APP字体颜色 */
#box a{color: lightskyblue;
}
/* 右边内容部分 */
#box2{float: right;margin-right: 50px;margin-top: 30px;height: 200px;width: 600px;
}
/* 设置关于学成网字体颜色 */
#box2 #yanse{color: blue;
}
/* 右边部分内容一 */
#last2{float: left;height: 200px;width: 100px;
}
/* 清除ul圆点标记 */
#last2 ul{list-style: none;
}
/* 右边部分内容二 */
#last3{float: left;margin-left: 95px;height: 200px;width: 100px;
}
/* 清除ul圆点标记 */
#last3 ul{list-style: none;
}
/* 右边内容部分三 */
#last4{float: left;margin-left: 95px;height: 200px;width: 100px;
}
/* 清除ul圆点标记 */
#last4 ul{list-style: none;
}效果如图：
HTML前端静态网页制作相关推荐
- 大学生动漫网页设计模板 机动战士高达静态网页制作成品下载 HTML漫画网页作业带JS轮播图
机动战士高达静态网页制作 应用知识点 作品介绍 首页部分代码 页面最终效果 网页源地址 应用知识点 DIV CSS布局.网页背景图.JS图片轮播.在线视频 作品介绍 机动战士高达动漫网页使用DIV C ...
- 利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息 服务器端:验证发来的账号信息,然后给出反馈 客户端和服务器类似两人沟 ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- 静态网页制作教程 （转载）
方法/步骤 新建一个txt文本文档,先不要急着修改文件后缀名,有基础的朋友手动输入HTML代码,不会也没有关系,百度搜索"网页HTML代码". 代码: <!Doctype h ...
- 分析静态网页客户服务器工作过程,(静态网页制作课程标准.doc
静态网页制作课程标准 课程编码: 02345 课程类别:专业基础必修课 适用专业:计算机应用 授课系(部):电子与信息系 学分学时: 4 编写执笔人:宋昌统 教研室主任审核签字: 审核日期: 系主任审 ...
- Javaweb实验：静态网页制作
Javaweb实验: 1.静态网页制作 目录 Javaweb实验: 前言 一.实验目的 二.实验原理 三.实验内容 四.实验步骤 五.实验结果 六.实验内容 七.实验步骤 八.实验结果 九.思考 1. ...
- 【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE htm ...
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
最新文章
- Android 开发包括哪些方面？如何提升？
- 企业做SEO优化哪些行为会被判定为作弊？
- 渗透测试之地基服务篇：服务攻防之中间件JBoss
- 频频转型的蘑菇街，能讲好直播这个“老故事”吗？
- Socket代码实现服务端 和 客户端之间通信
- PMO在组织结构中的作用
- UI设计素材|卡券界面设计
- 在eclipse-oxygen-sts中，关于快捷键[CTRL + SHIFT + O]失效的问题
- Cesium最全源码集合
- 特征选择mRMR算法实现全解
- linux安装系统识别不到硬盘,安装系统找不到硬盘解决方法【图文教程】
- 欢迎使用CSDN-markdown编辑器wewqewqew
- java开发pc端和移动端的区别,移动端和PC端的区别
- 计算机主机开机为什么显示器不开,电脑开机后显示器不亮怎么办？电脑开机后显示器没反应的解决办法...
- 高斯公式积分matlab,三用MATLAB实现定积分计算.PPT
- 【LeetCode】《剑指Offer》第Ⅴ篇⊰⊰⊰ 39 - 47题
- 使用ONNXRuntime部署阿里达摩院开源DAMO-YOLO目标检测，一共包含27个onnx模型(代码开源)...
- OCJP 考试题之八
- 通过NFS（nfsroot）启动linux系统
- NOI / 1.10编程基础之简单排序 02:奇数单增序列