码迷,mamicode.com
首页 > 移动开发 > 详细

Android之Web篇:Day01Html与Css基础入门

时间:2016-07-23 07:33:19      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

Day01 html与css基础入门

1.html的常见标签和实战

1.1 a标签

<a href="https://www.baidu.com" target="_blank">点我送福利哦!</a>
// target属性值_blank表示另取空白页打开网页,用new有同样的效果

1.2 img标签

<img src="plmm.jpg" width="100px" height="200px" alt="图片信息丢失!"/>
// alt属性的值表示当图片找不到时显示的文字信息

1.3 列表标签

<ol type="I" start="1">
    <li>我是天才1号</li>
    <li>我是天才2号</li>
    <li>我是天才3号</li>
    <li>我是天才4号</li>
</ol>

<ul type="circle">
    <li>我是逗逼1号</li>
    <li>我是逗逼1号</li>
    <li>我是逗逼1号</li>
    <li>我是逗逼1号</li>
</ul>

<dl>
    <dt>日记第一天</dt>
        <dd>好兴奋啊要上课了</dd>
    <dt>日记第二天</dt>
        <dd>晚上要早点睡觉</dd>
    <dt>日记第三天</dt>
        <dd>真的心累啊热啊</dd>
</dl>

/* ol(ordered list):有序
        li(list item):列表项
   ul(unordered list):无序
   dl(defined list):自定义
        dt(defined title):自定义标题
        dd(defined document):自定义内容
*/

1.4 表格标签

<table align="center" border="1" cellspacing="0" width="80%">
    <h3 align="center">考试信息登记表</h3>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>成绩</th>
    </tr>
    <tr align="center">
        <td>小二</td>
        <td>17</td>
        <td>男</td>
        <td>99</td>
    </tr>
    <tr align="center">
        <td>小三</td>
        <td>19</td>
        <td>女</td>
        <td>86</td>
    </tr><tr align="center">
        <td>小四</td>
        <td>17</td>
        <td>男</td>
        <td>100</td>
    </tr><tr align="center">
        <td>小五</td>
        <td>20</td>
        <td>男</td>
        <td>59</td>
    </tr>
</table>

/* 
    table属性:border表示边框,cellpadding表示表格内边距,spacepadding表示表格外边距
    td属性:rowspan表示合并的行数,colspan表示合并的列数
*/

1.5 表单标签

<form action="#" method="get">

    用户名:<input type="text" name="username"/><br/>
    密码:<input type="password" name="password" /><br>

    <input type="submit" value="登录" />  

    <br/>
    <input type="radio" name="gender" value="nan" />男   
    <input type="radio" name="gender" value="nv" />女    

    <br>
    <input type="checkbox" name="play" value="lanqiu" />篮球
    <input type="checkbox" name="play" value="zuqiu" />足球
    <input type="checkbox" name="play" value="paiqiu" />排球
    <input type="checkbox" name="play" value="qiu" />乒乓球

    <br>
    <select name="city">
        <option>深圳</option>
        <option>北京</option>
        <option>上海</option>
    </select>   
</form>

实战1:1024网站入口

  • 先来看一下效果图

技术分享
* 用到的图片如下

技术分享
技术分享

  • 代码如下

    技术分享

    警告 / WRANNING

    本物品內容可能看不明白;不可將本物品內容派發,傳閱,出售,出租,交給 或出借予年齡非程序猿的人士出示,播放或播映。

    This article contains material which may offernd and may not be distributed, circulated, sold, hired, given, lent, shown, played or projected to a person under the age of 18 years. All models are 18 or older.

    技术分享

实战2:世纪佳缘注册页面

  • 先来看一下效果图

技术分享
* 用到的图片如下

技术分享
* 代码如下

<form action="http://www.itheima.com/register" method="GET">
    <h4 align="center">世纪佳缘征婚注册表</h4>
    <table align="center" background="img/plmm.jpg">
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" name="username" />
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password" name="password" />
            </td>
        </tr>

        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="gender" value="man" />男
                <input type="radio" name="gender" value="wuman" />女</td>
        </tr>

        <tr>
            <td>爱好:</td>
            <td>
                <input type="checkbox" name="happy" value="lanqiu" />篮球
                <input type="checkbox" name="happy" value="zuqiu" />足球
                <input type="checkbox" name="happy" value="paiqiu" />排球
                <input type="checkbox" name="happy" value="wmx" />玩毛线</td>
        </tr>

        <tr>
            <td>城市:</td>
            <td>
                <select name="city">
                    <option>深圳</option>
                    <option>江西</option>
                    <option>贵州</option>
                    <option>湖南</option>
                    <option>吉林</option>
                    <option>湖北</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>个人宣言:</td>
            <td>
                <textarea>

                </textarea>
            </td>
        </tr>
        <th></th>
        <tr>
            <th colspan="2">
                <input type="submit" value="注册" />
            </th>
        </tr>

    </table>
</form>

2.css的使用

2.1 盒子模型

<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            .div1{
                width:200px;
                height:200px;
                background-color: red;

                padding: 50px;

                border: 5px;

            }

            .div2{
                background-color: blue;
                width:100px;
                height:100px;
                padding: 20px;
            }
        </style>
    </head>

    <body>

        <div class="div1">
            我是个天才
            <div class="div2">
                我是个小天才
            </div>
        </div>

    </body>
</html>

2.2 css的三种选择器

  • css获取html中的div有三种方式:类选择器,元素选择器,名称选择器。第一种是在div属性中定义一个class属性,然后在css中通过#来引用定义的值,同理第二种是通过.来引用,第三种是通过div名称来引用。
  • 导入css样式到html中也有三种方式,如@import url(“css/style.css”);获取@import url(css/style.css);都可以
  • 代码如下

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            @import url("css/style.css");
            div{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">这是第一块DIV区域</div>
        <div class="div2">这是第二块DIV区域</div>
    
        <span id="span1">这是第一块span区域</span>
        <span id="span2">这是第二块span区域</span>
    
        <div>我是个天才</div>
    </body>
    

2.3 流式布局

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1{
                width: 200px;
                height: 200px;
                background-color:aliceblue;

                margin-top: 30px;  /*  外边距 */
                margin-left: 50px;

                padding: 30px; /*  内边距 */

                border-style: ridge;
                border-color: coral;
                border-width: 2px;

                position: relative;
                float: left;
            }

            #div2{
                width: 200px;
                height: 200px;
                background-color:aliceblue;

                margin-top: 30px;  /*  外边距 */
                margin-left:10px;

                padding: 30px; /*  内边距 */

                border-style: ridge;
                border-color: coral;
                border-width: 2px;

                position: relative;
                float: left;
            }


            #div3{
                width: 200px;
                height: 200px;
                background-color:aliceblue;

                margin-top: 30px;  /*  外边距 */
                margin-left:10px;

                padding: 30px; /*  内边距 */

                border-style: ridge;
                border-color: coral;
                border-width: 2px;

                position: relative;
                float: left;
            }

        </style>
    </head>
    <body>
        <div id="div1">div1中的内容</div>
        <div id="div2">div2中的内容</div>
        <div id="div3">div3中的内容</div>
    </body>
</html> 

Android之Web篇:Day01Html与Css基础入门

标签:

原文地址:http://blog.csdn.net/u013443865/article/details/52001786

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!