9/9 代码练习

最新推荐文章于 2023-09-18 23:26:54 发布

任晓萱

最新推荐文章于 2023-09-18 23:26:54 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/rxx__/article/details/100668103

版权

HTML代码练习

一、标签使用

    <h1>42.6摄氏度：上海创出140年气象史上高温新纪录</h1>
	<p>2019年7月27日 10:58:26 来源： 新华网</p>
	<hr/>
	<p>
		新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４2．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。
	</p>
	<p>

二、锚点使用

/**一、跳到指定地点（在该页内）**/
<body>
	<h1>黄晓明 </h1>
	<p>
		&nbsp&nbsp&nbsp&nbsp黄晓明，1977年11月13日生于山东省青岛市市南区，中国内地男演员、歌手、商人，毕业于北京电影学院表演系。1998年主演个人首部电视剧《爱情不是游戏》，从而进入演艺圈。2001年凭借主演古装剧《大汉天子》获得关注。2005年起连续10年入选“福布斯中国名人榜”。2006年在武侠剧《神雕侠侣》中饰演杨过。2007年凭借民国剧《新上海滩》获得第13届上海电视节白玉兰奖最佳男演员提名；同年发行个人首张 ... <a href="#jc">>>></a>
	</p>
	<hr/>
	<strong id="jc">基础信息</strong>
	<p>......</p>
	<p>......</p>
	<p>......</p>
	<p>......</p>
</body>
/**二、跳到指定地点（跳转到相关页面）**/
<body>
	<h1>黄晓明 </h1>
	<p>
		&nbsp&nbsp&nbsp&nbsp黄晓明，1977年11月13日生于山东省青岛市市南区，中国内地男演员、歌手、商人，毕业于北京电影学院表演系。1998年主演个人首部电视剧<a target="blank" href="https://baike.baidu.com/item/%E7%88%B1%E6%83%85%E4%B8%8D%E6%98%AF%E6%B8%B8%E6%88%8F/7771584">《爱情不是游戏》</a>，从而进入演艺圈。2001年凭借主演古装剧《大汉天子》获得关注。2005年起连续10年入选“福布斯中国名人榜”。2006年在武侠剧《神雕侠侣》中饰演杨过。2007年凭借民国剧《新上海滩》获得第13届上海电视节白玉兰奖最佳男演员提名；同年发行个人首张 ... <a href="#jc">>>></a>
	</p>
	<hr/>
</body>

三、页面布局

最新商品部分，用两种办法
一、定位

<div>
		<strong>最新商品</strong><img src="img/title2.jpg"/>
		<div style="margin-top: 10px;position: absolute;height: 600px;">
			<img src="products/hao/big01.jpg" style="float: left;">
			<img src="products/hao/middle01.jpg">
			<div style="width: 240px;height: 240px;text-align: center;float: right;">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 850px;top: -475px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 1050px;top: -475px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 200px;top: -480px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 430px;top: -720px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 650px;top: -960px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 860px;top: -1200px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
			<div style="width: 240px;height: 240px;text-align: center;position: relative;left: 1050px;top: -1440px">
				<img src="products/hao/small08.jpg">
				<br>
				<br>
				<span>高压锅</span>
				<br>
				<br>
				<sapn style="color: red;">$998</span>
			</div>
		</div>
		<img src="products/hao/ad.jpg" style="position: relative;top: 480px;width: 1250px;">
	</div>

二、表格

<div style="width:100%">
			<p><b>最新商品</b><img src="图/img/title2.jpg"></p>
			<table  style="width: 100%">
    			<tr>
        			<th rowspan="2">
        				<img src="图/products/hao/big01.jpg" style="float: right;width: 100%;height: 100%">
        			</th>
        			<th colspan="3">
        				<img src="图/products/hao/middle01.jpg" style="float: left; width: 100%;height: 100%">
        			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
    			</tr>

    			<tr>
       	 			<th>
       	 				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
       	 			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
        			<th>
        			<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
        			<th>
        				<img src="图/products/hao/small08.jpg"><p>高压锅</p><p style="color: red">$998</p>
        			</th>
    			</tr>
    			<tr>
    				<th colspan="7">
    					<img src="图/products/hao/ad.jpg" style="width: 100%" >
    				</th>
    			</tr>
			</table>
		</div>

四、web练习

任晓萱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9/9 代码练习

HTML代码练习一、标签使用 <h1>42.6摄氏度：上海创出140年气象史上高温新纪录</h1> <p>2019年7月27日 10:58:26 来源：新华网</p> <hr/> <p> 新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４2．...
复制链接

扫一扫