html5 p1练习1，移动页面，标准标签布局

最新推荐文章于 2023-03-14 08:41:07 发布
最新推荐文章于 2023-03-14 08:41:07 发布
阅读量170 收藏
点赞数
原文链接：http://www.cnblogs.com/houweidong/p/9712992.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <style type="text/css">
body{margin: 0px;}
h4{display: inline;}
header{width: 100%;height: 50px;background: #AEFEEE;}
aside{width: 20%;height: 540px;background: #708090;float: left;}
section{width: 80%;height: 540px;background: #D88FD8;float: left;overflow: auto;}
footer{width: 100%;height: 50px;background: green;clear: left;}
figure{padding: 0px;}
img{max-width: 70%;}
ul{list-style-type: none;}
li{display: inline;}
a{text-decoration: none;}
</style>
</head>
<body>
<header>
<hgroup>
    <img src="imges/ss.png" alt="">
    <h4>移动端页面练习</h4>
</hgroup>
</header>

<aside>
<nav>
    <ul>
    <li><a href=""><img src="imges/zhi.png" alt=""></a></li>
    <li><a href=""><img src="imges/ka.png" alt=""></a></li>
    <li><a href=""><img src="imges/tuan.png" alt=""></a></li>
    <li><a href=""><img src="imges/ding.png" alt=""></a></li>
    <li><a href=""><img src="imges/vip.png" alt=""></a></li>
    <li><a href=""><img src="imges/sc.png" alt=""></a></li>
</ul>
</nav>

    
</aside>

<section>

<figure>
<img src="sp/sp1.png" alt=""  width="50%"><img src="sp/sp2.png" alt="" width="50%">
</figure>
<figcaption>食品/家电</figcaption>

<figure>
    <img src="sp/sp3.png" alt=""  width="50%"><img src="sp/sp4.png" alt="" width="50%">
</figure>
<figcaption>汽车/家居</figcaption>    

<figure>
    <img src="sp/sp5.png" alt=""  width="50%"><img src="sp/sp6.png" alt="" width="50%">
</figure>
<figcaption>手机/珠宝</figcaption>
</section>
<footer>
<nav>
    <ul>
    <li><a href=""><img src="imges/zy.png" alt="" width="45"></a></li>
    <li><a href=""><img src="imges/qb.png" alt="" width="45"></a></li>
    <li><a href=""><img src="imges/gw.png" alt="" width="45"></a></li>
    <li><a href=""><img src="imges/dl.png" alt="" width="45"></a></li>
    <li><a href=""><img src="imges/vip.png" alt="" width="45"></a></li>
    <li><a href=""><img src="imges/vip.png" alt="" width="45"></a></li>
</ul>
</nav>
</footer>
</body>
</html>

转载于:https://www.cnblogs.com/houweidong/p/9712992.html

weixin_34238633
关注
html--P1-P10
lvjingjie1的博客
10-05 337
主要内容：1课程介绍，2网页介绍，3浏览器介绍，4web标准，5HTML语言，6HTML骨架，7vscode，8注释，9标签介绍，10标题和段落标签
P1、HTML简介
猪猪的博客
08-18 1182
HTML介绍 HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方
【HTML】P1 HTML 标准结构
最新发布
weixin_43098506的博客
03-14 302
围绕HTML标准结构介绍的一些基础知识
1.2 HTML_常用标签p1
zyhui65的专栏
11-22 2585
文档名：HTML_常用标签 目  的：笔记常用标记的用法、属性等。 编  者：张永辉 2014年6月xx日 ================================================================================ 目录： `1  框架 FRAMESET、FRAME、noframes、IFRAME `2  表格 table `3 
HTML5基础(p1-p13)
L1ni01
05-01 290
先介绍客户端与服务端 图形化界面是C/S架构，网页是B/S架构 而我们所要研究的HTTP其实就是B/S中的B 的一部分
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2289
学习笔记
HTML+CSS+JS大作业：商城网购网站设计——淘宝1页
而风不止
11-17 2356
HTML：结构CSS：样式 GF 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
HTML+CSS学习07-精灵图和字体图标
Meowmow的博客
05-04 387
目录元素的显示与隐藏displayvisibilityoverflow精灵图（雪碧图）字体图标iconfont字体图标的下载字体图标的引用CSS三角应用：对话框样式 元素的显示与隐藏 display display:none; //隐藏对象，不再占有原位置 display:block; //转换元素为块级对象，显示元素 visibility visibility:visible; //元素可视 visibility:hidden; //元素隐藏，继续占有原位置 overflow overflow:hid
web前端基础html,css,js,jquery
weixin_57619565的博客
08-04 1476
目录 1 前端技术： 1.1 学习方法 1.1.1 前端要怎么学？ 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2.5 去掉px转rem提示 1.2.6
html5 练习代码
04-23
html5 练习代码 入门学习使用 简单实用
综合布线标签规范
06-21
综合布线标签规范综合布线标签规范综合布线标签规范综合布线标签规范综合布线标签规范
P1-网页基本组成-HTML-基本语法-常用标签-标准网页-注释语句-html中的属性
LXMXHJ的博客
04-08 1075
基础常识概念 根据W3C的标准，一个网页是由三个部分组成：结构（HTML）、表现（CSS）、行为（JavaScript）。 一个良好的网页要求三者分离。 原因：一个软件通常是维护时间大于开发时间，为了方便维护，所以采用三者分离的方式。 耦合，代码之间的关系过于亲密，修改一个必须要同时修改其他。解耦，降低代码之间的关系。 HTML介绍 概述 HTML（Hpertext Markup Language）超文本标记语言，它负责网页三个要素之中的结构，HTML使用标签的形式来识别网页中的不同组成部分。 所谓超
初识html第一天(P1——P14)
weixin_57748215的博客
12-06 499
网页由图片，文字，链接，声音，视频等元素构成。 HTML：超文本标记语言（hypertextmarkuplanguage），用来描述网页的语言。不是编程语言，是标记语言。之所以称为超文本，是由于它超越了文本的限制。 浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。 我用的IE浏览器内核为trident，国产浏览器一般使用webkit/blink内核。（反正我也记不住） web标准的构成（面试常问）：结构（structure）、表现（presentation）、...
HTML5练习1
weixin_30551947的博客
05-18 81
制作简历 主要代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>简历</title> </head> <body background="20140711075505_wicWx.jpeg"><!...
数据中心编码命名标志标签的建议规范
NWVDI的博客
07-16 2602
本文从数据中心运维管理实施角度出发，根据耐威迪公司参与的集团机构老数据中心扩容改造以及多地新建数据中心中发现的因命名不规范而增加管理掣肘问题总结的经验，我们参考TIA-942、TIA-606-C、TIA-5048、GB50174等行业标准规范提出了针对数据中心机房、机柜、设备、链路等基础设施编码命名标识的建议规范。 原则： 1、用户自定义英文字母命名，做到相对保密； 2、编码尽可能短，减少标识标签长度； 3、同含义编码连接符采用英文半角“-”，不同含义编码之间采用英文半角“_”。 数据中心 对于全球机构所
html标签笔记（1）
m0_49280070的博客
08-12 90
<p1>--<p6>:标题标签，p1到p6，从大到小 </br>:换行 <strong></strong>或者<b></b>:加粗字体 或者<i></i>:倾斜字体 <del></del>或者<S></S>:给字体添加删除线 <ins></ins>或者<u></
HTML 全局属性_02
weixin_30553837的博客
05-27 109
New : HTML5 新属性。 属性描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名（classname） contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-*New 用于存储页面的自...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值