HTML04—定位、显示方式

来源：互联网发布：ubuntu怎么升级内核编辑：程序博客网时间：2024/06/14 12:10

定位

流定位：块级元素从上往下排列（<p> <div>元素）；行内元素从左往右水平排列
浮动定位：浮动元素在父元素内，左右浮动直到外边缘碰到父元素或另一个浮动框的边框

<head><title>浮动定位</title><style type="text/css">div,p{    border: 1px solid black;}.inner{    width: 50px;    height: 50px;}.d1,.d2,.d3{    float:left}</style></head><body>    <h1>浮动定位</h1>    <div class="outter">        <div class="inner d1">d1</div>        <div class="inner d2">d2</div>        <div class="inner d3">d3</div>        <div style="border:0;clear:left">d4</div>    </div>    <p>浮动定位时，观察我的位置</p></body>

相对定位：元素原本所占据空间不释放，元素框相对于原位置进行偏移

<head><title>相对布局</title><style type="text/css">.nu2 {    position: relative;    left:300px;    top:-250px;}</style></head><body><div>    <img src="IMG.JPG" width="200px">    <p>111111</p>    <img class="nu2" src="IMG.JPG" width="200px">    <p class="nu2">222222</p></div></body>

绝对定位:将元素释放所占据空间，通过偏移属性固定元素位置

<head><title>绝对定位</title><style type="text/css">.p1 {    background-color:white;    position: absolute;    top:0px;    left:100px;}</style></head><body><div><img src="IMG.jpg" width="200px"/><p class="p1">1111</p></div></body>

固定定位：将元素固定在页面的某个位置（不占用页面空间）

//实现网页中回到顶部功能<head>    <meta charset="UTF-8">    <title>固定定位</title>    <style type="text/css">        .top {            position: fixed;            bottom:10px;            right:5px;            text-align:center;            background-color: red;            width:50px;        }        div {            marign:0 auto;            width:85%;        }    </style></head><body><a name="top"></a><!-- 定义一个锚点 --><h1>固定定位</h1><div>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p>    <p>文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容        文本文档内容文本文档内容文本文档内容文本文档内容文本文档内容</p></div><div class="top">    <a href="#top">Top</a><!-- 访问锚点 --></div></body>

显示方式
- 块元素：自上而下，可以设置宽高<h1> <div> <p>
- 行内元素：从左往右，不可以设置宽高<span> <a>
- 行内块：从左往右，可以设置宽高<input> <image>
  display : -none:不显示元素，释放位置； -block:转换为块；-inline：转换为行内；-inline-block：转换为行内块

简单的注册页面
- action=”register.do”中的register.do是编写servlet的路径
- label:使用<label for="male">男 </label><input id="female"name="sex" type="radio" value="f">点击男字也会选中单选框
- onclick=”history.back()”实现返回历史页面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>注册用户</title><style type="text/css"></style></head><body>    <h1>注册用户</h1>    <form action="register.do" >    <!--action将表单提交给哪个路径处理  -->        <p>            账    号：<input type="text" name="username"/><br/>        </p>        <p>            姓    名：<input type="text" name="name"/><br/>        </p>        <p>            密    码：<input type="password"name="password"/><br/>        </p>        <p>            性    别：<input id="male"name="sex" type="radio" value="m"/>            <label for="male">男 </label>               <input id="female"name="sex" type="radio" value="f">             <label for="female">女</label>               <input id="serect" name="sex" type="radio" value="s" checked="checked"/>               <label for="serect">保密</label>        </p>        <p>            爱    好：<input id="basketBox"type="checkbox" name="hobby" value="0"/>            <label for="basketBox">篮球</label>            <input id="footballBox"type="checkbox" name="hobby" value="1"/>            <label for="footballBox">足球</label>            <input id="swimBox"type="checkbox" name="hobby" value="2"/>            <label for="swimBox">游泳</label>        </p>        <p>            <input type="hidden" name="token" value="abc123"/>            <input type="file" name="fileUpload"/>        </p>        <p>            你的偶像是？            <select name="like">                <option value="x">习主席</option>                <option value="t">特总统</option>                <option value="p">普总统</option>                <option value="j">金主席</option>            </select>        </p>        <p>            自我介绍：<textarea name="about" rows="4" cols="25"></textarea>        </p>        <p>            <input type="submit" value="注册"/>            <input type="reset" value="清空"/>            <input type="button" value="返回" onclick="history.back();"/>        </p>    </form></body></html>

阅读全文

0 0