DIV+CSS 实例（使用定位方式实现横向两列布局）

最新推荐文章于 2021-07-20 16:51:00 发布

H_36627117

最新推荐文章于 2021-07-20 16:51:00 发布

阅读量687

点赞数 1

分类专栏：网页布局 HTML+CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_36627117/article/details/108220694

版权

本文通过一个DIV+CSS实例，展示了如何利用CSS定位技术实现横向两列布局。首先展示未添加样式的HTML页面效果，然后引入CSS样式文件，通过标签链接样式表。经过样式调整后，页面布局变得整洁有序。这是一个学习和实践CSS布局的好例子。

摘要由CSDN通过智能技术生成

制作网页的重要的就是布局，布局根据自己的需求和喜好去进行更改，制作令自己满意的静态网页，所以就必须掌握好css，如何运用到项目中去，那么学了css，就该自己动手去做，这样才能容易吸收和消化。我就用div+css做了个静态网页，布局是两列布局方式，来看看实例吧。

先给出html代码部分（index.html）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>定位横向布局</title>
  <link rel="stylesheet" type="text/css" href="position.css" />
</head>

<body>
<div id="wrap">
  <div id="header">
    <div class="logo">前端开发教程</div>
    <div class="nav">
      <ul>
        <li class="current"><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </div>
  </div>
  <div id="mainbody">
    <div id="sidebar">
      <dl>
        <dt>CSS 基础教程</dt>
        <dd class="current"><a href="#">CSS 简介</a></dd>
        <dd><a href="#">CSS 基础语法</a></dd>
        <dd><a href="#">CSS 高级语法</a></dd>
        <dd><a href="#">CSS 派生选择器</a></dd>
        <dd><a href="#">CSS id 选择器</a></dd>
        <dd><a href="#">CSS 类选择器</a></dd>
        <dd><a href="#"&g

最低0.47元/天解锁文章

H_36627117

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS 实例（使用定位方式实现横向两列布局）

制作网页的重要的就是布局，布局根据自己的需求和喜好去进行更改，制作令自己满意的静态网页，所以就必须掌握好css，如何运用到项目中去，那么学了css，就该自己动手去做，这样才能容易吸收和消化。我就用div+css做了个静态网页，布局是两列布局方式，来看看实例吧。先给出html代码部分（index.html）<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <m
复制链接

扫一扫