前端基础 - 案例一：基础网站搭建
2024-05-27 12:19:34
基础网站搭建案例：
HTML ：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="main.css">
</head><body><div class="nav"><div class="photo"><img src="data:images//logo.png" alt="英莱特"></div><div class="word"><span><a href="#"><strong>首页</strong></a></span><span><a href="#"><strong>课程</strong></a></span><span><a href="#"><strong>职业规划</strong></a></span></div><div class="button"><input type="text"><div class="button1"><button><img src="data:images/btn.png" alt=""></button></div></div><div class="photo1"><img src="data:images/user.png" alt="user"><span>qq-lilei</span></div></div><div class="inf"><div class="inf1"><div class="nav1"><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 class="nav2"><div class="nav3"><h3>我的课程表</h3></div><ul><li class="word1"><strong>继续学习 程序语言设计</strong></li><li><p>正在学习使用对象</p></li><hr><li class="word1"><strong>继续学习 程序语言设计</strong></li><li><p>正在学习使用对象</p></li><hr><li class="word1"><strong>继续学习 程序语言设计</strong></li><li><p>正在学习使用对象</p></li><hr><button><strong>全部课程</strong></button></ul></div></div></div><div class="inf_one"><a href="#" class="name"><strong> 精品推荐</strong></a><span>|</span><a href="#">jQuery</a><span>|</span><a href="#">jQuery</a><span>|</span><a href="#">jQuery</a><span>|</span><a href="#">jQuery</a></div><div class="sub"><h3>精品推荐</h3></div><div class="cont"><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div><div class="image1"><div class="one"><img src="data:images/pic.png" alt=""></div><div class="four"><p>Think PHP 5.0 博客系统实战项目演练</p><span class="two">高级</span><span class="three"> · 1125人在学习</span></div></div></div><div class="bottom"><div class="bottom3"><div class="bottom1"><div class="images3"><img src="data:images/logo.png" alt=""></div><p>英莱特在线教育致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p><p>© 2017年XTCG Inc.保留所有权利。-陕ICP备15025210号</p><button>下载APP</button></div><div class="bottom2"><div class="li1"><ul><p>关于英莱特</p><li>关于</li><li>管理团队</li><li>工作机会</li><li>客户服务</li><li>帮助</li></ul></div><div class="li1"><ul><p>关于英莱特</p><li>关于</li><li>管理团队</li><li>工作机会</li><li>客户服务</li><li>帮助</li></ul></div><div class="li1"><ul><p>关于英莱特</p><li>关于</li><li>管理团队</li><li>工作机会</li><li>客户服务</li><li>帮助</li></ul></div></div></div></div>
</body></html>
CSS ：
* {margin: 0;padding: 0;
}body {background-color: #ffffff;/* overflow: hidden; */
}.top {height: 34px;background-color: #f1f1f1;overflow: hidden;
}.top_1 {width: 1200px;height: 37px;margin: 0 auto;/* background-color: blue; */
}.top_word {height: 31px;float: left;
}.top_word span {font-size: 11px;color: #666666;
}.top_word .user {font-size: 13px;color: #c81623;
}.top_list {height: 31px;float: left;float: right;/* background-color: red; */margin-top: 6px;
}.top_list li {float: left;list-style: none;
}.top_list li a,
li {font-size: 11px;margin-left: 14px;color: #666666;text-decoration: none;
}.nav {width: 1201px;height: 106px;margin: 25px auto 0;overflow: hidden;
}.nav_logo {width: 219px;height: 57px;float: left;
}.nav_sousuo {width: 753px;height: 60px;float: left;
}.nav_sousuokuang {width: 547px;height: 35px;margin: 0 auto;background-color: blue;
}.nav_sousuokuang input {width: 460px;height: 35px;margin: 0 auto;float: left;
}.nav_sousuokuang button {width: 83px;height: 39px;margin: 0 auto;float: left;
}.nav_list {height: 25px;width: 547px;margin: 0 auto;/* background-color: blue; */overflow: hidden;
}.nav_list ul li {list-style: none;float: left;margin-left: 26px;
}.nav_list ul li a {text-decoration: none;font-size: 11px;color: #666666;
}.nav_list ul .one a {color: #c81623;
}.nav_shop {width: 180px;height: 55px;float: left;margin: 0 0px 0 27px;
}.nav_shop button {width: 140px;height: 34px;background-color: #f7f7f7;border: 1px solid #dfdfdf;
}.fenlei {width: 1201px;height: 47px;margin: 0 auto;overflow: hidden;
}.fenlei_one {width: 210px;height: 47px;background-color: #b1191a;text-align: center;float: left;
}.fenlei_one span {color: #f1dfdf;line-height: 42px;
}.fenlei_two {width: 730px;height: 47px;float: left;margin-left: 10px;
}.fenlei_two ul li {list-style: none;float: left;
}.fenlei_two ul li a {text-decoration: none;color: #5d5d5d;font-size: 18px;margin-left: 25px;line-height: 42px;
}hr {border: 2px solid #b1191a;background-color: #b1191a;
}.xinxi {width: 1201px;height: 467px;margin: 0 auto;overflow: hidden;
}.xinxi_one {width: 210px;height: 467px;background-color: #c81623;float: left;
}.xinxi_one ul li {list-style: none;margin-top: 5px;
}.xinxi_one ul li a {font-size: 14px;color: #f1dfdf;text-decoration: none;line-height: 26px;
}.xinxi_two {width: 720px;height: 467px;float: left;margin-left: 10px;margin-top: 11px;
}.xinxi_list {width: 251px;height: 164px;margin-top: 10px;float: left;margin-left: 10px;
}.xinxi_list ul li {list-style: none;
}.xinxi_list p {font-size: 14px;border-bottom: 1px dashed #e8e8e7;line-height: 30px;margin-left: 20px;
}.xinxi_list ul li {font-size: 12px;line-height: 25px;
}.xinxi_list ul li span {font-weight: 600;
}.xinxi_img {width: 251px;height: 290px;float: left;margin-left: 10px;margin-top: 2px;
}.tuijian {width: 1201px;height: 163px;margin: 10px auto 0;background-color: #ebebeb;
}.tuijian_one {width: 240px;height: 163px;float: left;
}.tuijian_two {width: 240px;height: 163px;float: left;
}.tuijian_three {width: 130px;height: 163px;float: left;
}.tuijian_three p {font-size: 17px;
}.tuijian_three .one {line-height: 50px;
}.tuijian_three .two {background-color: #00a0e8;color: white;float: left;
}.tuijian_three .three {font-size: 14px;color: #878787;text-align: left;display: inline-block;
}.tuijian_four {width: 110px;height: 163px;float: left;margin-top: 25px;
}.tuijian_four img {width: 110px;
}.biaoti {width: 1201px;height: 60px;margin: 0 auto;text-align: left;overflow: hidden;
}.biaoti span {font-size: 22px;font-weight: 600px;
}.biaoti p {font-size: 17px;margin-left: 10px;
}.biaoti div {float: left;float: right;
}.shangpin {width: 1201px;height: 235px;margin: 10px auto 0;/* background-color: burlywood; */border: 1px solid #ededed;overflow: hidden;
}.shangpin_one {width: 200px;height: 235px;float: left;/* background-color: blue; */
}.one_img {width: 200px;height: 162px;text-align: center;
}.one_img img {margin-top: 15px;
}.two_img {width: 164px;height: 45px;margin-left: 36px;/* background-color: chartreuse; */border-right: 1px solid #ededed;
}.two_img span,
p {/* margin-left: 36px; */font-size: 12px;color: #666666;
}.two_img span {width: 113px;
}.two_img p {font-size: 17px;color: #df3033;
}.one_img .three_img {margin-top: 60px;
}.biaoti_two {width: 1201px;height: 60px;margin: 0 auto;text-align: left;overflow: hidden;
}.biaoti_two span {font-size: 22px;font-weight: 600px;
}.wupin {width: 1201px;height: 405px;margin: 0px auto;
}.wupin_one {width: 404px;height: 405px;float: left;
}.wupin_two {width: 797px;height: 405px;float: left;
}.buttom {width: 100%;height: 421px;margin-top: 15px;background-color: #f5f5f5;overflow: hidden;
}.buttom-1 {width: 1201px;height: 421px;margin: 0 auto;overflow: hidden;
}.img1 {width: 240px;height: 120px;float: left;margin: 10px auto 0;/* background-color: violet; */overflow: hidden;
}.img12 {width: 88px;height: 120px;/* background-color: red; */float: left;
}.img12 img {margin: 30px 0 0 40px;
}.img13 {width: 110px;height: 40px;float: left;/* background-color: royalblue; */margin-top: 36px;margin-left: 5px;
}.wenzi-1 {width: 100px;height: 184px;float: left;/* background-color: royalblue; */margin-left: 100px;overflow: hidden;
}.wenzi-1 dt {font-size: 19px;font-weight: 600;line-height: 40px;
}.wenzi-1 dd {font-size: 15px;
}.buttom-10 {width: 1201px;height: 47px;margin: 300px auto 0px 0px;padding-left: 60px;border-top: 1px solid #878787;/* background-color: black; */
}.buttom-10 ul li {list-style: none;float: left;margin-left: 15px;
}.buttom-1 p {text-align: center;
}.clear {clear: both;
}
前端基础 - 案例一：基础网站搭建相关推荐
- SpringBoot2.0基础案例(01)：环境搭建和RestFul风格接口
一.SpringBoot 框架的特点 SpringBoot2.0 特点 1)SpringBoot继承了Spring优秀的基因,上手难度小 2)简化配置,提供各种默认配置来简化项目配置 3)内嵌式容器简 ...
- 纯前端开发案例：用 SpreadJS 搭建信息系统软件开发平台
华闽通达 - R 平台应用 所使用产品:SpreadJS 企业背景 福建华闽通达信息技术有限公司成立于 2007 年,是一家致力于工程项目管理.电子政务.电子商务及企业 ERP 实现的 SAAS.PA ...
- Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
- SpringBoot2.0基础案例分类总结，后续更新计划说明
一.基础案例 1.基础案例概览 历时一个半月,SpringBoot2.0基础案例的文章基本更新完毕了,基础案例包含了SpringBoot的基础教程,高级应用,日志配置,数据库使用,事务管理等.关于Sp ...
- web前端学习笔记:电商网站结构搭建与基础区块制作
思维导图 1.站点结构搭建 项目背景 前端开发工程师的主要任务就是将UI设计图以网页.app.小程序等前端界面呈现给用户的过程. 对于大部分前端初学者来说,直接开始写代码其实是错误的学习步骤,在企业实 ...
- 【个人网站】零基础个人网站搭建完整教程二（网站服务器配置）
零基础个人网站搭建完整教程(二) 内容包括:前端搭建+后端搭建+如何选购服务器和域名+连接服务器+上传代码+网站上线(完整教程) 从0到1搭建网站 零基础个人网站搭建完整教程(二) 前言 三.选购服务 ...
- 零基础，快速安装dedeCMS 搭建网站 - 总结大全
零基础,快速安装dedeCMS 搭建网站 - 总结大全 dedeCMS,又称为织梦CMS 快速安装dedeCMS官方模板,极速搭建内容管理网站,零基础也能分分钟搞定. 安装流程: 准备工作: 下载wa ...
- 网站前端开发必会基础知识有哪些？
自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...
- 三.基础部分+asp网站搭建
渗透测试流程:更全面地找出服务器的问题,更倾向保护 明确目标-->信息收集-->漏洞探测-->漏洞验证-->信息分析-->获取所需-->信息整理-->形成报告 ...
最新文章
- finalshell文件列表不显示_Jira面板配置_待办事项不显示问题列表
- vaddin使用技巧
- STL源码剖析 配接器
- python统计字符在文件中出现的次数_一文搞定统计字符串中某字符出现的频次
- php mysql 模型_ThinkPHP数据库与模型
- 全网首发：LINUX右键新建时的模板问题
- 云服务器温控系统,服务器cpu温度监控软件
- Linux的capability分析
- 计算机作文 六年级,我和电脑600字_六年级作文_小学作文 - 265学校教育网
- 【CSS】537- 认真介绍 CSS 原理
- jquery中的data-icon和data-role
- 电脑上怎么绘制流程图？三分钟快速绘制流程图的秘诀
- 阿里大文娱深耕电影赛道，推出多部爆款电影
- PostgreSQL 时序数据案例 - 时间流逝, 自动压缩, 同比\环比
- DRM驱动（六）之atomic_check
- 使用 holer 实现外网访问本地服务
- 怎样用360查看计算机使用记录,电脑360浏览器历史记录怎么查看
- 特此郑重声明！我的文章全部是原创作品！转载请注明出处！
- #2022年合肥市经开区第7届信息学竞赛小学组试题题解#
- IIS Rewrite 下载与配置