耗时5小时用纯HTML和CSS写成的博学谷
2024-05-13 04:50:06
我会把项目所需要的设计图和我自己所写的代码放在末尾的网盘中，有需要可以直接划至末尾下载。
这是我自己根据设计图写出来的博学谷，这是设计图：
这是我根据设计图做出来的效果图：
下面附上我写的代码：
这是首页，即index.html
<!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>博学谷</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head><body><!-- 顶部声明 --><div class="top"><div class="wrapper"><span>传智播客旗下高端在线教育品牌 </span><span>|</span><span> 线下学院</span></div></div><!-- shortcut部分 --><div class="shortcut wrapper"><a href="#" class="logo"><img src="./images/logo.png" alt=""></a><ul><li><a href="#">学习中心</a></li><li><a href="#">购物车</a></li><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div><!-- 导航部分 --><div class="nav wrapper"><div class="left">全部资料</div><div class="middle"><ul><li><a href="#">首页</a></li><li><a href="#">就业班</a></li><li><a href="#" class="spirit">职业路线</a></li><li><a href="#" class="spirit">微课</a></li><li><a href="#" class="spirit">学习社区</a></li><li><a href="#">问答精灵</a></li><li><a href="#">论坛</a></li></ul></div><div class="right"><span>|</span><span></span></div></div><!-- banner图 --><div class="banner"><div class="wrapper bgi"></div><!-- 左侧导航 --><div class="navigation"><ul class="wrapper"><li><a href="#">Java</a></li><li><a href="#">前端</a></li><li><a href="#">大数据</a></li><li><a href="#">Android</a></li><li><a href="#">C/C++</a></li><li><a href="#">iOS</a></li><li><a href="#">UI</a></li><li><a href="#">网络营销</a></li><li><a href="#">Python</a></li></ul></div></div><!-- 优惠券 --><div class="youhuiquan wrapper"><ul><li><a href="#"><img src="./images/infos.png" alt=""><p>200元券</p><p>关注微信即可获得200元</p></a></li><li><a href="#"><img src="./images/infos.png" alt=""><p>200元券</p><p>关注微信即可获得200元</p></a></li><li><a href="#"><img src="./images/infos.png" alt=""><p>200元券</p><p>关注微信即可获得200元</p></a></li><li><a href="#"><img src="./images/infos.png" alt=""><p>200元券</p><p>关注微信即可获得200元</p></a></li></ul></div><!-- 推荐 --><div class="recommend wrapper"><div class="left"><h2>热门公开课</h2><ul><li><a href="#"><img src="./images/pub.png" alt="" class=".radius"><p>javascript <span>讲师 : xxx</span></p><p>开始时间:11/11 20:30 <span><img src="./images/pub01.png" alt="">直播未开始</span></p></a></li><li><a href="#"><img src="./images/pub.png" alt="" class=".radius"><p>javascript <span>讲师 : xxx</span></p><p>开始时间:11/11 20:30 <span><img src="./images/pub01.png" alt="">直播未开始</span></p></a></li></ul><a href="#" class="leftButton Button"></a><a href="#" class="rightButton Button"></a></div><div class="right"><div class="cover"><h2>博学谷新闻</h2><img src="./images/news.png" alt=""></div><div class="news"><h2>资讯公告</h2><ul><li><a href="#">云计算在线班，挑战年薪30W</a></li><li><a href="#">Web前端在线实战班，不解释</a></li><li><a href="#">这次，带你走上高级U设计师</a></li><li><a href="#">辣眼睛？这就是博学谷的真相</a></li><li><a href="#">200元优患券+免费视频资料</a></li><li><a href="#">学习Python,离高薪梦更进</a></li></ul></div></div></div><!-- goods --><div class="goods wrapper"><div class="nav"><h2>精品微课</h2><p><a href="#">课程推荐</a><a href="#">JavaEE</a><a href="#">UI设计</a><a href="#">前端</a><a href="#">网络营销</a><a href="#">大数据</a><a href="#">Python</a><a href="#">PHP</a></p></div><ul><li><a href="#"><img src="./images/wk.jpg" alt=""><h2>【前端】Vue.js设计与实战</h2><p>讲师:黑马讲师 | 18小时</p><p><span style="color: red; font-size: 20px;">￥699.00</span> <span style="text-decoration: line-through;">￥899.00</span><img src="./images/per.png" alt=""> 149</p></a></li><li><a href="#"><img src="./images/wk.jpg" alt=""><h2>【前端】Vue.js设计与实战</h2><p>讲师:黑马讲师 | 18小时</p><p><span style="color: red; font-size: 20px;">￥699.00</span> <span style="text-decoration: line-through;">￥899.00</span><img src="./images/per.png" alt=""> 149</p></a></li><li><a href="#"><img src="./images/wk.jpg" alt=""><h2>【前端】Vue.js设计与实战</h2><p>讲师:黑马讲师 | 18小时</p><p><span style="color: red; font-size: 20px;">￥699.00</span> <span style="text-decoration: line-through;">￥899.00</span><img src="./images/per.png" alt=""> 149</p></a></li><li><a href="#"><img src="./images/wk.jpg" alt=""><h2>【前端】Vue.js设计与实战</h2><p>讲师:黑马讲师 | 18小时</p><p><span style="color: red; font-size: 20px;">￥699.00</span> <span style="text-decoration: line-through;">￥899.00</span><img src="./images/per.png" alt=""> 149</p></a></li></ul></div><!-- 底部版权 --><div class="footer"><div class="wrapper"><div class="top"><div class="left"><h2>博古云课堂</h2><p>博学谷云课堂，是传智播客旗下的在线教育品牌。专注整合传智优势数学资源、打造适合在线学习并能保正教学结果的优质数学产品，同时打造和运营整套教育生态软件体系，为用户提供满足自身成长和发展要求的有效服务。</p></div><div class="middle"><h2>关注我们</h2><img src="./images/weibo.png" alt=""><img src="./images/weixin.png" alt=""></div><div class="right"><h2>友情链接</h2><p><a href="#">传智播客</a><a href="#">传智播客论坛</a><a href="#">黑马程序论坛</a><a href="#">传智播客公开课</a><a href="#">传智教材资源下载</a><a href="#">CSDN</a><a href="#">黑马程序</a><a href="#">传智云课</a><a href="#">博学谷视频库</a></p></div></div><div class="bottom"><p><a href="#">关于我们</a> |<a href="#">人才招聘</a> |<a href="#">联系我们</a> |<a href="#">常见问题</a></p><p>京CP备08001421号京公网安备110108007702 Copyright@2016-2017博学谷All Rights Reserved</p></div></div></div>
</body></html>
这是用来清除默认样式的代码：
/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {margin: 0;padding: 0;
}/* 內减模式 */
* {box-sizing: border-box;
}/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;
}/* 去除列表默认样式 */
ul,
ol {list-style: none;
}/* 去除默认的倾斜效果 */
em,
i {font-style: normal;
}/* 去除a标签默认下划线，并设置默认文字颜色 */
a {text-decoration: none;color: #333;
}/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {vertical-align: middle;
}/* 去除input默认样式 */
input {border: none;outline: none;color: #333;
}/* 左浮动 */
.fl {float: left;
}/* 右浮动 */
.fr {float: right;
}/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}
.clearfix::after {clear: both;
}这是主页效果实现的代码：
/* 首页样式 */
.wrapper {width: 1190px;margin: 0 auto;
}/* 顶部声明 */
.top {height: 31px;
}.top span {font-size: 14px;
}.top span:first-child {color: #999;
}.top span:last-child {color: #333;
}/* shortcut部分 */
.shortcut {height: 76px;line-height: 76px;background-color: #fff;
}.shortcut .logo {float: left;
}.shortcut ul {float: right;
}.shortcut ul li {float: left;margin-right: 10px;
}.shortcut ul li:nth-child(2) a {padding-right: 10px;border-right: 1px solid;
}.shortcut ul li a {font-size: 14px;color: black;
}/* 导航部分 */
.nav {height: 42px;line-height: 42px;
}.nav .left {float: left;width: 230px;height: 42px;border-radius: 5px;text-align: center;background-color: #3492FD;
}.nav .middle ul {float: left;
}.nav .middle ul li {float: left;margin-left: 40px;
}.nav .right {position: relative;float: right;width: 242px;height: 30px;border-radius: 15px;border: 1px solid #eee;
}.nav .right span:first-child {position: absolute;top: -8px;left: 160px;color: #ccc;
}.nav .right span:last-child {position: absolute;top: 4px;left: 192px;width: 20px;height: 20px;background-image: url(../images/search.png);
}/* banner图 */
.banner {position: relative;background-color: #383f8f;
}.banner .bgi {height: 320px;background-image: url(../images/web.jpg);
}.banner .navigation {width: 230px;height: 430px;position: absolute;left: calc(50% - 595px);top: 0;background-color: rgba(0, 0, 0, 0.5);
}.banner .navigation li {display: block;width: 230px;height: 40px;line-height: 40px;padding-top: 10px;
}.banner .navigation li a {display: block;/* width: 230px; */padding-left: 40px;color: #ccc;
}.banner .navigation li a:hover {background-color: white;
}.banner .navigation li a::after {float: right;content: '>';margin-right: 20px;
}/* 优惠券 */
.youhuiquan {margin-top: 8px;margin-right: calc(50% - 595px);width: 952px;height: 101px;
}.youhuiquan li {float: left;width: 238px;height: 101px;
}.youhuiquan li a {display: block;width: 238px;height: 101px;
}.youhuiquan li img {/* display: inline-block; */float: left;margin: 30px 10px 26px 30px;width: 44px;height: 44px;
}.youhuiquan li p {display: inline-block;font-size: 14px;margin-top: 30px;
}.youhuiquan li p:last-child {vertical-align: bottom;margin-top: 0px;
}/* 推荐 */
.recommend {margin-top: 30px;height: 256px;
}.recommend .left {position: relative;float: left;width: 690px;height: 256px;
}.recommend .left h2 {margin-left: 50px;margin-top: 20px;margin-bottom: 14px;font-weight: normal;
}.recommend .left ul li {float: left;width: 286px;height: 196px;border-radius: 10px;margin-left: 50px;margin-right: 22px;background-color: #fff;
}.recommend .left ul li .radius {height: 120px;border-radius: 5px 5px 0 0;
}.recommend .left ul li:last-child {margin-left: 0;
}.recommend .left ul li p {margin-top: 16px;margin-left: 18px;margin-right: 10px;font-size: 14px;
}.recommend .left ul li p:last-child {margin-top: 0px;
}.recommend .left ul li p span {float: right;
}.recommend .left .Button {/* display: none; */position: absolute;top: 130px;width: 30px;height: 61px;
}
.recommend .left .leftButton { left: 0px;background-image: url(../images/left.png);
}.recommend .left .rightButton {background-image: url(../images/right.png);
}.recommend .right {float: right;margin-left: 10px;padding-left: 50px;width: 490px;height: 256px;
}.recommend .right h2 {font-weight: normal;margin-top: 10px;margin-bottom: 14px;border-bottom: 2px solid transparent;
}.recommend .right h2:hover {color: #3492FD;border-bottom: 2px solid #3492FD;
}.recommend .right .cover {float: left;
}.recommend .right .news {margin-left: 60px;float: left;
}.recommend .right .news ul {list-style: disc;color: #3492FD;
}.recommend .right .news ul li {margin-bottom: 8px;
}/* goods */
.goods .nav h2 {float: left;font-weight: normal;
}.goods .nav p {float: left;
}.goods .nav p a {margin-left: 22px;font-size: 14px;
}.goods ul {width: 1190px;height: 254px;
}.goods ul li {float: left;margin-right: 7px;width: 290px;height: 254px;
}.goods ul li:last-child {margin-right: 0;
}.goods ul li img {width: 290px;
}.goods ul li h2 {font-weight: normal;font-size: 16px;
}.goods ul li p {padding-left: 10px;
}.goods ul li p img {margin-left: 50px;width: 11px;height: 14px;
}/* 底部版权 */
.footer {height: 294px;background-color: #333;color: #fff;
}.footer .top {height: 204px;
}.footer .top .left {float: left;width: 440px;height: 204px;
}.footer .top h2 {margin-top: 40px;font-weight: normal;margin-bottom: 10px;
}.footer .top .middle {float: left;padding-left: 40px;width: 180px;height: 204px;
}.footer .top .right {float: right;padding-left: 30px;width: 570px;height: 204px;
}.footer .top .right a {margin-right: 45px;color: #fff;font-size: 14px;
}.footer .top .right a:nth-child(4) {margin-right: 60px;
}.footer .top .right a:nth-child(n+5) {margin-right: 30px;
}.footer .bottom {height: 89px;border-top: 1px solid #393e46;padding-top: 26px;
}.footer .bottom p {text-align: center;
}.footer .bottom p a {color: #fff;
}
链接：https://pan.baidu.com/s/1LG6C2mxFA0K9ExmlfKe7Mw
提取码：TTXS
耗时5小时用纯HTML和CSS写成的博学谷相关推荐
- 纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标 代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS学习总结#【博学谷学习记录】超强总结，用心分享
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.CSS基础 CSS有三种写法: 主要的选择器优先级从低到高有: CSS字体和文字样式: 复合选择器 显示模式 CS ...
- 纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
- 原创：纯手工打造CSS像素画--笨笨熊系列图标
纯手工打造CSS像素画--笨笨熊系列图标 作者:冰极峰 转载请注明出处 在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看 ...
- 纯HTML、CSS实现下拉菜单
在完成百度前端学院的初级任务阶段时,是不允许使用 javascript 来制作页面动态效果,但是对于下拉菜单效果的实现可以仅仅通过纯HTML和CSS来完成. (效果图) 实现的思路为,利用单选框(ra ...
- 【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌 握HTML网页设计前端盒子的布局.嵌套,及css效果的 使用... 微信官网首页主要有以下几个需要关注的 ...
- 纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理 效果 页面 增 删 改 翻页 页面显示条数 查找 跳页 代码 结语 效果 话不多说,直接看效果,本次代码较为复杂,希望大家可以耐心阅读,不 ...
- 纯HTML和CSS实现精美点赞效果
纯HTML和CSS实现点赞效果,动态效果由CSS实现,主要有两个动画实现 代码下面自取
- html格子像素画,HTML_纯手工打造CSS像素画，在cssplay网站看到有一组CSS像素 - phpStudy...
纯手工打造CSS像素画 在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看看预览图 图一 基本原理: 没有什么技术含量,主 ...
- HTML怎么做成多彩背景,纯html+div+css模拟酷炫彩色渲染背景
纯html+div+css模拟酷炫彩色渲染背景 www.html.com.cn 出品 html> 纯div+css模拟酷炫彩色渲染背景 /* 自写js */ body{ /*padding:0; ...
最新文章
- Kafka简介、安装
- WPF 3D：使用GeometryModel3D的BackMaterial
- 一生只有43年，喜欢泡妹打架，却凭借一篇文章震惊世界，跻身一流数学家
- 总算OK了，折磨了好几天
- 最长公共子序列（信息学奥赛一本通-T1265）
- java 输出helloword
- Android studio如何导入已有的eclipse工程
- canoe和python_CANoe开发从入门到精通
- 如何快速学从零开始学习3d建模?
- 多媒体互动项目-Unity与继电器数据交互
- reactjs安装并在脚手架中使用 material-ui/core
- bootbox.js中confirm()方法的使用
- Wireshark流量分析
- 手机里重力感应器和陀螺仪的区别
- 骡马盒子搭建详细教程
- 绘制二次贝塞尔曲线的几种方式
- 监听Home键和返回键
- Unity-ShaderGraph制作2D动画精灵发光
- KOL营销抢跑新消费品牌
- unix操作系统可以用于服务器管理吗,UNIX操作系统使用必备(四)