Web前端第二季(CSS):九:第5章:案例开发:501-京东案例开发+502-京东切分三框布局+503-利用绝对定位和相对定位开发第一列+504-开发中间布局

最新推荐文章于 2023-01-12 13:49:42 发布
最新推荐文章于 2023-01-12 13:49:42 发布
阅读量136 收藏
点赞数
分类专栏： CSS 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40544338/article/details/121332913
版权

目录

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

 1.我自己代码的GitHub网址

1.SIKI学院:我参考此视频实操

1.w3school官网:当做字典使用

1.菜鸟教程：当做字典使用

三.注意

四.操作:1:成功:501-京东案例开发

1.运行结果：成功：

四.操作:2:成功:502-京东切分三框布局

1.运行结果：成功：

四.操作:2:成功:503-利用绝对定位和相对定位开发第一列

1.运行结果：成功：

四.操作:3:成功:504-开发中间布局

1.运行结果：成功：

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

 1.我自己代码的GitHub网址

​​​​​GitHub - xzy506670541/WebTest: SIKI学院的Web前端

1.SIKI学院:我参考此视频实操

Web前端第二季（CSS） - SiKi学院 - 生命不息，学习不止！

  1. 我参考此视频实操

1.w3school官网:当做字典使用

w3school 在线教程

1.菜鸟教程：当做字典使用

菜鸟教程 - 学的不仅是技术，更是梦想！

三.注意

四.操作:1:成功:501-京东案例开发

1.运行结果：成功：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
				background-color: #f0f3ef;
			}
			.title{
				text-align: center;
				font-family: 'fzzzh';
				color: #222;
			}
			.container{
					width: 1170px;
					height: 450px;
					background-color:red;
					margin: 0 auto;
			}
		</style>
		
	</head>
	<body>
		<h3 class="title">--- 居家优品 ---</h3>
		<div class="container">
			
		</div>
	</body>
</html>

四.操作:2:成功:502-京东切分三框布局

1.运行结果：成功：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
				background-color: #f0f3ef;
			}
			.title{
				text-align: center;
				font-family: 'fzzzh';
				color: #222;
			}
			.container{
					width: 1190px;
					height: 450px;
					background-color:red;
					margin: 0 auto;/* 居中 */
			}
			.left,.center,.right{
				width: 390px;
				height: 450px;
				float: left;
				background-color: white;
			}
			.left,.center{
				margin-right: 10px;
			}
		</style>
		
	</head>
	<body>
		<h3 class="title">--- 居家优品 ---</h3>
		<div class="container">
			<div class="left">1</div>
			<div class="center">2</div>
			<div class="right">3</div>
		</div>
	</body>
</html>

四.操作:2:成功:503-利用绝对定位和相对定位开发第一列

1.运行结果：成功：

四.操作:3:成功:504-开发中间布局

1.运行结果：成功：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background-color: #f0f3ef;
			}

			.title {
				text-align: center;
				font-family: 'fzzzh';
				color: #222;
			}

			.container {
				width: 1190px;
				height: 450px;
				/* background-color:red; */
				margin: 0 auto;
				/* 居中 */
			}

			.left,
			.center,
			.right {
				width: 390px;
				height: 450px;
				float: left;
				background-color: white;
			}

			.left {
				background-color: transparent;
			}

			.left,
			.center {
				margin-right: 10px;
			}

			/* 第一列 */
			.border {
				width: 340px;
				height: 420px;
				border: 5px solid black;
				position: relative;
				top: 20px;
			}

			.border img {
				position: absolute;
				bottom: 25px;
				left: 45px;
			}

			/* 第二列 */
			.box_hd {
				width: 356px;
				height: 60px;
				padding: 0 20px;
				line-height: 44px;
			}

			.box_hd h3 {
				margin: 0px;
				padding: 0px;
				font-size: 22px;
				line-height: 44px;
				font-weight: normal;
				margin-top: 8px;
			}

			.box_bd {
				padding: 0px 20px;
			}

			.box_bd img {
				margin-bottom: 7px;
				margin-right: 2px;
			}

			.last {
				margin-right: 0px;
			}
		</style>

	</head>
	<body>
		<h3 class="title">--- 居家优品 ---</h3>
		<div class="container">
			<div class="left">
				<div class="border">
					<img src="img/JD-left.jpg">
				</div>
			</div>

			<div class="center">
				<div class="box_hd">
					<h3>家电馆</h3>
				</div>
				<div class="box_bd">
					<img src="img/JD-1.jpg">
					<img src="img/JD-2.jpg">
					<img class="last" src="img/JD-3.jpg">
				</div>

			</div>

			<div class="right">
				<div class="box_hd">
					<h3>家电馆</h3>
				</div>
				<div class="box_bd">
					<img src="img/JD-1.jpg">
					<img src="img/JD-2.jpg">
					<img class="last" src="img/JD-3.jpg">
				</div>

			</div>

		</div>
	</body>
</html>

Smart_zy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端移动Web第一天：流式布局-京东首页案例
m0_46597922的博客
04-08 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=...
Web学习 京东网案例：头部+底部
小学生
05-25 585
源文件网址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content=...
前端案例分享：京东电梯式导航
09-08
web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航 web前端基础制作京东电梯式导航
前端---京东案例小细节笔记
sinat_35821285的博客
12-15 386
小细节1：获取各网站的网站图标  网站地址+/favicon.ico 下载         京东：www.jd.com/favicon.ico           能下载京东图标         所有：网站名（带www.）/favicon.ico    下载所有网站的图标 引入 网站名：bitbug.net  自定义小图标        favico
移动WEB开发之流式布局-京东案例
qq_46199553的博客
09-09 820
2. 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口  一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。  iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元 素看上去很小，一般默认可以通过手
Web前端开发第二季：CSS布局
06-14
课程目标HTML和CSS是组成WEB前端开发最核心的技术，结合第一季的HTML课程，然后再来学习这套CSS课程，你将会获得更多的体验。启发式教学，每一节课程都有案例演示，让你从头到尾学习毫无压力。课程简介CSS主要用于对...
Web前端开发第三季：CSS特效
06-14
课程目标：本季课程引入了CSS3众多功能中的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。整合 HTML5 & CSS3 最强大效果，有的是网站开发中常用的、实用的功能，有的是先进的 Web 技术的应用演示。...
WEB前端开发-案例汇总(81例).zip
05-08
《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库，包含了81个不同的实战案例，旨在帮助初学者逐步进阶，并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目，涵盖了前端开发的...
第1章 Web前端开发概述-HTML5+CSS3 Web前端开发与实例教程（微课视频版）配套PPT
最新发布
06-09
### Web前端开发概述 #### 一、Web前端开发职责 Web前端开发主要涉及网站前端的构建，具体职责包括但不限于以下几个方面： 1. **HTML页面制作**：根据UI设计图，利用HTML按照W3C标准制作网页，同时使用CSS对页面...
Web前端开发第4季：JavaScript基础入门
06-14
在本季课程的讲解部分结合了大量的案例演示，通过案例演示可以清楚的加深对JavaScript基本语言的理解； 建议在学习的过程中，一定要动手实战，这样才能真正的领悟到JavaScript的语法细节。 课程案例展示： 案例01:...
HTML+CSS京东商城实战
04-23
京东网站大体部分制作。适合新手入门。内含html css文件。
WEB前端-案例汇总
11-08
WEB前端-案例汇总；史上最全的前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例。
移动web京东项目
大青虫的博客
05-02 823
目录 1.首页轮播图 1.首页轮播图 ps：注意细节 1.巧用width:100%（牢记参照父元素） 比如 ，下图中，li 的宽度 等于 盒子（jd_banner）的宽度 ，作用都懂，很容易搞混淆 2.overflow:hidden(父元素，裁剪 ，子元素) visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。...
DIV+css模仿京东整体布局
星空下的密码
12-19 4831
测试导航 *{ padding:0px; margin:0px; } /*首部*/ #top_box{ width: 100%; height: 31px; background: #F7F7F7; } #top_box #box{ width:990px; height: 31px;
京东项目html 5结构+CSS布局的学习二
weixin_41984072的博客
02-19 242
一 页面首尾公共样式制作。 制作成果： 遇到问题：1.精灵图比所量div盒子大 ，用backgrond-size调整大小 用于解决该问题了但精灵图定位需要慢慢试 。 对于精灵图使用还是不太熟练。 2.搜索框制作时，当页面放大时会出现缝隙。（还未改正） 二首页中间部分制作 中间部分制作没有遇到什么特别的问题 但有一部分宽高总是测量不准,浮动时会掉下去. 京东案例已完成...
了解WEB移动端布局并通过京东项目开发学习| 流式布局
凌晨冲锋者的博客
04-12 385
了解WEB移动端布局并通过京东项目流式布局开发学习布局记录01 什么是移动端布局 所谓的移动端布局就是通过百分比（流式布局），flex布局，rem布局，响应式布局。 在一般开发中移动端页面开发也分为【独立移动端页面】《京东，淘宝》等，【响应式页面】《三星官网》等，当然，目去行业上因更方便以及美观性能等一般都以【独立移动端页面】开发。 ——此次记录本人通过传统的流式布局进行模仿京东APP（m.jd.com）的移动端页面开发—— 进行项目搭建 创建文件夹移动端京东,里面创建images(存放网络小图),uplo
移动WEB开发之流式布局 ---京东移动端首页
不爱吃菜的菜菜的博客
04-27 641
步骤： 1. 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取流式布局 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 <!-- 引入我们的CSS初始化文件 --> <link rel="stylesheet" href="css/normalize.css"> <!-- 引入我们首页的css --> <link rel="stylesheet" href="css/index...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)
weixin__BJ050106的博客
01-12 2225
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值