Web前端程序设计作业--div与span实现效果

haoshuai_121

于 2022-11-27 11:49:55 发布

阅读量521

点赞数

分类专栏： Web前端程序设计学习文章标签： html

本文链接：https://blog.csdn.net/haoshuai_121/article/details/128062424

版权

Web前端程序设计学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

使用div与span实现如下效果：主要结构如下为最上面为div中间为三个span，最下层为div 在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>haoshuai的文档2020214387</title>
	<style>p {text-indent:2em;} </style>
</head>
<body>

    <div class="图1"><img src="1.jpg"  style="margin-left:20" /></div>

    <span style="width:240px; float:left;">

      <ul>

        <li>旅游须知</li>

        <ul>

        <li><a href="#">参加旅行社注意事项</a></li>

        <li><a href="#">旅游保险常识</a></li>

        </ul>

        <li>旅游景点</li>

        <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        </ul>

        <li>旅游图库</li>

        <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        </ul>

        <li>特色美食</li>

        <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        </ul>

      </ul>

      <form>&nbsp;&nbsp;友情链接<br /><br />

      &nbsp;&nbsp;&nbsp;&nbsp;

      <select>

         <option value="s1"><a href="#">北京旅游信息网</a></option>

         <option value="s2"><a href="#">2</a></option>

         <option value="s3"><a href="#">3</a></option>

      </select>

      </form>

    </span>

    <span style="width;500px;float:left">

    <img src="2.jpg" style="width:490px" />

    </span> 

    <span style="width:280px;float:left">

    <p>&nbsp;&nbsp;*2015大连长沙群岛国际海钓节<br />

    &nbsp;&nbsp;时间：<br />

    &nbsp;&nbsp;地址：</p>

     <p>&nbsp;&nbsp;*2016大连长沙群岛国际海钓节<br />

    &nbsp;&nbsp;时间：<br />

    &nbsp;&nbsp;地址：</p>

     <p>&nbsp;&nbsp;*2017大连长沙群岛国际海钓节<br />

    &nbsp;&nbsp;时间：<br />

    &nbsp;&nbsp;地址：</p>

     <p>&nbsp;&nbsp;*2018大连长沙群岛国际海钓节<br />

    &nbsp;&nbsp;时间：<br />

    &nbsp;&nbsp;地址：</p>

     <p>&nbsp;&nbsp;*2019大连长沙群岛国际海钓节<br />

    &nbsp;&nbsp;时间：<br />

    &nbsp;&nbsp;地址：</p>

    </span>

	</body>
</html>