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

最新推荐文章于 2024-09-19 21:41:32 发布

KousaiM

最新推荐文章于 2024-09-19 21:41:32 发布

阅读量1w

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/nihaixiao/article/details/53455001

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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="images/icon_drawer_burger.png" class="left a1_img1" />
		<img src="images/m_drawer_icon_home_selected.png" class="left a1_img2" />
		<div class="left a1_div">蒲昌路</div>
		<img src="images/pager_tab_menu_indicator.png" class="left a1_img3" />
		<img src="images/icon_search.png" class="right a1_img4" />
	</div>
	<div class="a2">
		<img src="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="images/menu_icon_home.png" class="a1_img2 left li_img" />
			<div class="left">我要订餐</div>
		</li>
		<li>
			<img src="images/menu_icon_order_list.png" class="a1_img2 left li_img" />
			<div class="left">我要订餐</div>
		</li>
		<li>
			<img src="images/menu_icon_invitation.png" class="a1_img2 left li_img" />
			<div class="left">我要订餐</div>
		</li>
		<li>
			<img src="images/menu_icon_about.png" class="a1_img2 left li_img" />
			<div class="left">我要订餐</div>
		</li>
		<li>
			<img src="images/menu_icon_gift.png" class="a1_img2 left li_img" />
			<div class="left">我要订餐</div>
		</li>
	</ul>
</body>
</html>