网站管理权限,同济建筑人才网,国家企业查询官网,官方网站建设的重要性1、 准备工作
1.1 项目目录
网站根目录是指存放网站的第一层文件夹#xff0c;内部包含当前网站的所有素材#xff0c;包含HTML、CSS、图片、JavaScript等等。 1.2 版心效果 可以发现都是呈现版心居中的效果#xff0c;但是每次都写一次太麻烦了#xff0c;可以把版心居中…1、 准备工作
1.1 项目目录
网站根目录是指存放网站的第一层文件夹内部包含当前网站的所有素材包含HTML、CSS、图片、JavaScript等等。 1.2 版心效果 可以发现都是呈现版心居中的效果但是每次都写一次太麻烦了可以把版心居中的代码放到一个类选择器里面之后要使用版心居中效果的时候就使用这个类选择器就好了。
2、网页制作思路
1.布局思路先整体在局部从外到内从上到下从左到右
2.CSS实现思路 1画盒子调整盒子范围 ---宽高背景色 2调整盒子位置 --- flex布局、内外边距 3控制图片、文字内容样式
3、header 区域-布局 通栏宽度与浏览器窗口相同的盒子 3.1 logo制作技巧 logo功能
单击跳转到首页搜索引擎优化提升网站百度搜索排名
实现方法
标签结构h1 a 网站名称搜索关键字CSS样式 3.2 导航制作技巧nav 导航功能
单击跳转页面
实现方法
标签结构ul li*3 a优势避免堆砌 a 标签网站搜索排名降级布局思路 li 设置 右侧 margina 设置 左右 padding 3.3 搜索区域search 实现方法 3.4 用户区域user 实现方法
标签结构 .user a img span 4、 banner区域-布局 4.1 左侧侧导航left 实现方法
标签结构.left ul li * 9 a布局思路 a 默认状态背景图为白色右箭头 4.2 右侧课程表right
实现方法
标签结构 .right h3 .content 5、精品推荐recommend 实现方法
标签结构.recommend h3 ul a.modify
布局思路flex布局 5.1 精品课程course 实现方法
标签结构 .hd .bd
布局思路 盒子模型 5.2 前端区域 6、版权区域 base.css
/* 基础公共样式清除默认样式 设置通用样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}body {font: 14px/1.5 Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}a {color: #333;text-decoration: none;
}index.css
/* 首页样式 */
/* 版心 */
.wrapper {margin: 0 auto;width: 1200px;
}body {background-color: #f3f5f7;
}/* 头部区域 */
.header {height: 100px;background-color: #fff;
}.header .wrapper {padding-top: 29px;display: flex;
}/* logo */
.logo a {display: block;width: 195px;height: 41px;background-image: url(../images/logo.png);font-size: 0;
}/* 导航 */
.nav {margin-left: 102px;
}.nav ul {display: flex;
}.nav li {margin-right: 24px;
}.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* actvie 类选择器表示默认选中的a */
.nav li .active,
.nav li a:hover {border-bottom: 2px solid #00a4ff;
}/* 搜索 */
.search {display: flex;margin-left: 64px;padding-left: 19px;padding-right: 12px;width: 412px;height: 40px;background-color: #f3f5f7;border-radius: 20px;
}.search input {flex: 1;border: 0;background-color: transparent;/* 去掉表单控件的焦点框 */outline: none;
}/* ::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {font-size: 14px;color: #999;
}/* 父级是flex布局子级变弹性盒子加宽高生效 */
.search a {align-self: center;width: 16px;height: 16px;background-image: url(../images/search.png);
}/* 用户 */
.user {margin-left: 32px;margin-top: 4px;
}.user img {margin-right: 7px;/* vertical-align 行内块和行内垂直方向对齐方式 */vertical-align: middle;
}.user span {font-size: 16px;color: #666;
}/* banner 区域 */
.banner {height: 420px;background-color: #0092cb;
}.banner .wrapper {display: flex;justify-content: space-between;height: 420px;background-image: url(../uploads/banner.png);
}/* 侧导航 */
.banner .left {padding: 3px 20px;width: 191px;height: 420px;background-color: rgba(0,0,0,0.42);
}.banner .left a {/* 块级宽度是父级的100% */display: block;height: 46px;background: url(../images/right.png) no-repeat right center;line-height: 46px;font-size: 16px;color: #fff;
}.banner .left a:hover {background-image: url(../images/right-hover.png);color: #00a4ff;
}/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 305px;background-color: #209dd5;border-radius: 10px;
}.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;
}.banner .right .content {padding: 14px;height: 257px;background-color: #fff;border-radius: 10px;
}.banner .right dl {margin-bottom: 12px;border-bottom: 1px solid #e0e0e0;
}.banner .right dt {margin-bottom: 8px;font-size: 14px;line-height: 20px;font-weight: 700;
}.banner .right dd {margin-bottom: 8px;font-size: 12px;line-height: 16px;
}.banner .right dd span {color: #00a4ff;
}.banner .right dd strong {color: #7d7d7d;font-weight: 400;
}.banner .right a {display: block;height: 32px;background-color: #00a4ff;text-align: center;line-height: 32px;font-size: 14px;color: #fff;border-radius: 15px;
}/* 精品推荐 */
.recommend {display: flex;margin-top: 11px;padding: 0 20px;height: 60px;background-color: #fff;box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);line-height: 60px;
}.recommend h3 {font-size: 18px;color: #00a4ff;font-weight: 400;
}.recommend ul {/* 除去标题和修改兴趣的尺寸父级剩余尺寸都给ul实现把修改兴趣挤到最右侧 */flex: 1;display: flex;
}.recommend ul li a {padding: 0 24px;border-right: 1px solid #e0e0e0;font-size: 18px;
}.recommend ul li:last-child a {border-right: 0;
}.recommend .modify {font-size: 16px;color: #00a4ff;
}/* 推荐课程 */
.course {margin-top: 15px;
}/* 标题 - 公共类与其他区域共用 */
.hd {display: flex;justify-content: space-between;height: 60px;line-height: 60px;
}.hd h3 {font-size: 21px;font-weight: 400;
}.hd .more {padding-right: 20px;background: url(../images/more.png) no-repeat right center;font-size: 14px;color: #999;
}/* 课程内容 - 公共类 */
.bd ul {display: flex;flex-wrap: wrap;justify-content: space-between;
}.bd li {margin-bottom: 14px;width: 228px;height: 271px;background-color: pink;
}.bd li .pic {height: 156px;
}.bd li .text {padding: 20px;height: 115px;background-color: #fff;
}.bd li .text h4 {margin-bottom: 13px;height: 40px;font-size: 14px;line-height: 20px;font-weight: 400;
}.bd li .text p {font-size: 14px;line-height: 20px;color: #999;
}.bd li .text p span {color: #fa6400;
}.bd li .text p i {font-style: normal;
}/* 前端 */
.hd ul {display: flex;
}.hd li {margin-right: 60px;font-size: 16px;
}.hd li .active {color: #00a4ff;
}.bd {display: flex;justify-content: space-between;
}.bd .left {width: 228px;/* background-color: pink; */
}.bd .right {width: 957px;/* background-color: pink; */
}.bd .right .top {margin-bottom: 15px;height: 100px;
}/* 版权 */
.footer {margin-top: 60px;padding-top: 60px;height: 273px;background-color: #fff;
}.footer .wrapper {display: flex;justify-content: space-between;
}.footer .left {width: 440px;/* background-color: pink; */
}.footer .left p {margin-top: 24px;margin-bottom: 14px;font-size: 12px;line-height: 17px;color: #666;
}.footer .left .download {display: block;width: 120px;height: 36px;border: 1px solid #00a4ff;text-align: center;line-height: 34px;font-size: 16px;color: #00a4ff;
}.footer .right {display: flex;
}.footer .right dl {margin-left: 130px;
}.footer .right dt {margin-bottom: 12px;font-size: 16px;line-height: 23px;
}.footer .right a {font-size: 14px;color: #666;line-height: 24px;
} index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线/title!-- 顺序要求先清除再设置 --link relstylesheet href./css/base.csslink relstylesheet href./css/index.css
/head
body!-- 头部区域 --div classheaderdiv classwrapper!-- logo --div classlogoh1a href#学成在线/a/h1/div!-- 导航 --div classnavullia href# classactive首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索 --div classsearchinput typetext placeholder请输入关键词a href#/a/div!-- 用户 --div classusera href#img src./uploads/user.png altspan播仔学前端/span/a/div/div/div!-- banner 区域 --div classbannerdiv classwrapperdiv classleftullia href#前端开发/a/lilia href#后端开发/a/lilia href#移动开发/a/lilia href#人工智能/a/lilia href#商业预测/a/lilia href#云计算大数据/a/lilia href#运维测试/a/lilia href#UI设计/a/lilia href#产品/a/li/ul/divdiv classrighth3我的课程表/h3div classcontentdldt数据可视化课程/dtddspan正在学习/span-strongecharts使用步骤/strong/dd/dldldtVue3医疗项目课程 /dtddspan正在学习/span-strong认识组合式API/strong/dd/dldldtReact核心技术课程/dtddspan正在学习/span-strongrudex配合TS使用/strong/dd/dla href#全部课程/a/div/div/div/div!-- 精品推荐 --div classrecommend wrapperh3精品推荐/h3ullia href#HTML/a/lilia href#CSS/a/lilia href#JavaScript/a/lilia href#Node.js/a/lilia href#Ajax/a/lilia href#Vue2.0/a/lilia href#Vue3.0/a/lilia href#TypeScript/a/lilia href#React/a/li/ula href# classmodify修改兴趣/a/div!-- 精品推荐课程 --div classcourse wrapper!-- 标题 --div classhdh3精品推荐/h3a href# classmore查看全部/a/div!-- 内容 --div classbdullia href#div classpicimg src./uploads/course01.png alt/divdiv classtexth4JavaScript数据看板项目实战/h4pspan高级/span · i1125/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course02.png alt/divdiv classtexth4Vue.js实战——面经全端项目/h4pspan高级/span · i2726/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course03.png alt/divdiv classtexth4玩转Vue全家桶iHRM人力资源项目/h4pspan高级/span · i9456/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course04.png alt/divdiv classtexth4Vue.js实战医疗项目——优医问诊/h4pspan高级/span · i7192/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course05.png alt/divdiv classtexth4小程序实战小兔鲜电商小程序项目/h4pspan高级/span · i2703/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course06.png alt/divdiv classtexth4前端框架Flutter开发实战/h4pspan高级/span · i2841/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course07.png alt/divdiv classtexth4熟练使用React.js——极客园H5项目/h4pspan高级/span · i95682/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course08.png alt/divdiv classtexth4熟练使用React.js——极客园PC端项目/h4pspan高级/span · i904/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course09.png alt/divdiv classtexth4前端实用技术Fetch API 实战/h4pspan高级/span · i1516/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/course10.png alt/divdiv classtexth4前端高级Node.js零基础入门教程/h4pspan高级/span · i2766/i人在学习/p/div/a/li/ul/div/div!-- 前端 --div classwrapper!-- 标题 --div classhdh3前端开发工程师/h3ullia href# classactive热门/a/lilia href#初级/a/lilia href#中级/a/lilia href#高级/a/li/ula href# classmore查看全部/a/divdiv classbddiv classleftimg src./uploads/web_left.png alt/divdiv classrightdiv classtopimg src./uploads/web_top.png alt/divdiv classbottomullia href#div classpicimg src./uploads/web01.png alt/divdiv classtexth4JS高级javaScript进阶面向对象ES6/h4pspan高级/span · i101937/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/web02.png alt/divdiv classtexth4零基础玩转微信小程序/h4pspan高级/span · i133781/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/web03.png alt/divdiv classtexth4JavaScript基础——语法解析项目实战/h4pspan高级/span · i8927/i人在学习/p/div/a/lilia href#div classpicimg src./uploads/web04.png alt/divdiv classtexth4前端框架Vue2Vue3全套视频/h4pspan高级/span · i26022/i人在学习/p/div/a/li/ul/div/div/div/div!-- 版权 --div classfooterdiv classwrapperdiv classlefta href#img src./images/logo.png alt/ap学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号/pa href# classdownload下载APP/a/divdiv classrightdldt关于学成网/dtdda href#关于/a/dddda href#管理团队/a/dddda href#工作机会/a/dddda href#客户服务/a/dddda href#帮助/a/dd/dldldt新手指南/dtdda href#如何注册/a/dddda href#如何选课/a/dddda href#如何拿到毕业证/a/dddda href#学分是什么/a/dddda href#考试未通过怎么办/a/dd/dldldt合作伙伴/dtdda href#合作机构/a/dddda href#合作导师/a/dd/dl/div/div/div
/body
/html
