html-菜鸟--书架仿饿了么首页

1.html：超文本标记语言

<!DOCTYPE HTML>版本说明
<html><head>头部信息不直接显示，主要给浏览器和搜索引擎</head><body>网页的主要内容</body>
</html>

3.标签的选择只从功能入手，不要从效果入手

4.标题标签 h1-h6

5.超链接a
属性：
href=“地址” 指定链接地址
注意在地址里也可以写 javascript:脚本代码
<a href="javascript:...." > </a>

6.div区域本身不显示，主要用来分块，它的特点就是如果没有设置样式，那它默认是独占一行

7.span 只是它不换行

8.img图片标签

9.列表标签
ul ol
他们还要和li标签来组合，每一个列表项就是一个li

10.样式：
1、直接在标签上写样式，使用style="" 属性来写
2、在style标签里写样式
选择器{
样式的属性:值;
}
选择器就是用来选择标签的
第一种标签选择器
第二种类选择器，在标签上用class=“类名” 可以同时有多个

###例子1.一个嵌套书架

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><!-- 优先使用 IE 最新版本和 Chrome --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><!-- 页面描述 --><meta name="description" content="不超过150个字符"/><!-- 页面关键词 --><meta name="keywords" content=""/><!-- 网页作者 --><meta name="author" content="name, email@gmail.com"/><!-- 搜索引擎抓取 --><meta name="robots" content="index,follow"/><!-- 为移动设备添加 viewport --><meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --><!-- iOS 设备 begin --><meta name="apple-mobile-web-app-title" content="标题"><!-- 添加到主屏后的标题（iOS 6 新增） --><meta name="apple-mobile-web-app-capable" content="yes"/><!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"><!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --><meta name="apple-mobile-web-app-status-bar-style" content="black"/><!-- 设置苹果工具栏颜色 --><meta name="format-detection" content="telphone=no, email=no"/><!-- 忽略页面中的数字识别为电话，忽略email识别 --><!-- 启用360浏览器的极速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 不让百度转码 --><meta http-equiv="Cache-Control" content="no-siteapp" /><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC强制全屏 --><meta name="full-screen" content="yes"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC应用模式 --><meta name="browsermode" content="application"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no"><title></title><style >html,body{width:100%;height:100%;margin:0px;/*外边距*/padding:0px;/*内边距*/}.a1{border-bottom:solid 3px rgb(123,123,123);/*边框 线 宽 颜色 */ width:100%;height:8%;background-image:url(images/bj.jpg);/*设置背景图片*/color:rgb(255,255,255);/*设置颜色*/font-size:14px;}.a2{/*border:solid 1px #f00;*/width:100%;height:92%;background-image:url(images/jia.png);background-size:100% 20%;/*设置背景图片的大小 分别为 宽 高 */}.a1_1{height:100%;width:20%;float:left;/*浮动靠左*/}.a1_2{height:100%;line-height:300%;width:60%;float:left;/*浮动靠左*/text-align:center;/*文字横向居中*/font-size:20px;}.a1_3{height:100%;width:20%;float:left;/*浮动靠左*/}.a1_1_1{width:80%;height:70%;line-height:245%;text-align:center;background-color:rgb(156,69,0); /*背景颜色*/margin:10px;}</style>
</head>
<body><div class="a1"><div class="a1_1"><div class="a1_1_1">我的书架</div></div><div class="a1_2">小说阅读器</div><div class="a1_3"><div class="a1_1_1">在线搜索</div></div></div><div class="a2"></div>
</body>
</html>

###例子2.仿饿了么首页

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">html,body{width:100%;height:100%;margin:0px;padding:0px;background-color:rgb(41,48,49);}.a1{width:100%;height:60px;background-color:rgb(57,146,206);color:rgb(255,255,255);font-size:18px;}.a1_div{height:60px;line-height:60px;}.a1_img1{margin-top:13px;}.a1_img2{height:95%;}.a1_img3{margin-top:42px;}.a1_img4{margin-top:5px;height:80%;}.left{float:left;}.right{float:right;}/*****************/.a2{width:100%;height:80px;border-bottom:solid 3px rgb(57,146,206);color:#fff;}.a2_h3{margin-top:10px;margin-bottom:5px;}.a2_img{margin-left:20px;}/*****/ul{list-style:none;/*去掉列表的点*/margin:0px;padding:0px;width:100%;}li{width:100%;height:60px;line-height:60px;color:rgb(165,166,165);font-size:20px;border-bottom:solid 3px rgb(57,56,57);}.li_img{margin-left:20px;margin-right:20px;}</style>
</head>
<body><div class="a1"><img src="data:images/icon_drawer_burger.png" class="left a1_img1" /><img src="data:images/m_drawer_icon_home_selected.png" class="left a1_img2" /><div class="left a1_div">蒲昌路</div><img src="data:images/pager_tab_menu_indicator.png" class="left a1_img3" /><img src="data:images/icon_search.png" class="right a1_img4" /></div><div class="a2"><img src="data:images/m_drawer_icon_default_avt.png" class="left a1_img2 a2_img" /><div class="left"><h3 class="a2_h3">个人中心</h3><p class="a2_h3">登录可享更多特权</p></div></div><ul><li><img src="data:images/menu_icon_home.png" class="a1_img2 left li_img" /><div class="left">我要订餐</div></li><li><img src="data:images/menu_icon_order_list.png" class="a1_img2 left li_img" /><div class="left">我要订餐</div></li><li><img src="data:images/menu_icon_invitation.png" class="a1_img2 left li_img" /><div class="left">我要订餐</div></li><li><img src="data:images/menu_icon_about.png" class="a1_img2 left li_img" /><div class="left">我要订餐</div></li><li><img src="data:images/menu_icon_gift.png" class="a1_img2 left li_img" /><div class="left">我要订餐</div></li></ul>
</body>
</html>

html-菜鸟--书架仿饿了么首页—Html学习（1）相关推荐

Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
餐饮小程序首页仿饿了么
餐饮小程序首页仿饿了么,通常包括以下内容: 商家logo和名称:显示在页面顶部,用于品牌认知. 轮播图:通常位于页面中部,用于展示商家的特色菜品或促销活动. 分类导航:一般位于页面底部,方便用户快速浏 ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
高仿“饿了么”Vue项目（一）
高仿"饿了么"Vue项目(一) 当我们把Vue框架的概念过了一遍之后,要进一步提升,就要看看别人是怎么使用Vue框架来做项目了. 在github上有不少好的Vue项目,我找到了其中 ...
Android仿饿了么加减控件,Flutter + Native混合栈仿饿了么APP
前言一个基于Flutter + Native混合开发的APP,请求数据均人为制造. 目前仅上传Android版本,iOS暂未上传 APK下载 Github地址效果图: 实现功能: 首页使用百度定 ...
低仿饿了么H5-纯前端Vue版 + 手把手教学
这是一个低仿饿了么H5的纯前端练手,数据是伪造的,写的比较粗糙,写这个的目的是为了加深一下熟练度,半年前看到别人写的仿cnodejs网站,我也用vue1仿了cnodeJs的网站,当时写的也是粗糙的令人 ...
android 高仿点餐,仿饿了吗点餐界面ListView联动的实现
主要实现了2个ListView怎样实现互相关联,正好上篇博客review了ListView控件常规使用,因此本篇博客主要对大神的那篇博客的实现进行代码层的剖析. 一方面,方便自己,在以后的代码实现上加 ...
用vue制作饿了么首页(1)
无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由购物车每部分先占住自己位置,然后挨个将这三部分分别 ...
饿了吗app都是用html写的,Vue2.0仿饿了么webapp单页面应用详细步骤
这篇文章主要为大家详细介绍了Vue2.0仿饿了么webapp单页面应用详细步骤,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 部分截图 [图片暂 ...
android按钮变输入框动画,AnimShopButton 仿饿了么加入购物车旋转控件 - 自带闪转腾挪动画的按钮。自带海量可定制 UI 属性。在 Re @codeKK Android开源站...
A shopping cart button with a telescopic displacement rotation animation ... 一个仿饿了么带伸缩位移旋转动画的购物车按钮 ...

html-菜鸟--书架仿饿了么首页—Html学习（1）

html-菜鸟--书架仿饿了么首页—Html学习（1）相关推荐

最新文章

热门文章