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

16-07-25 来源：[db:作者]

收藏我要投稿

Day01 html与css基础入门

1.html的常见标签和实战

1.1 a标签

点我送福利哦！
// target属性值_blank表示另取空白页打开网页，用new有同样的效果

1.2 img标签


// alt属性的值表示当图片找不到时显示的文字信息

1.3 列表标签


    我是天才1号
    我是天才2号
    我是天才3号
    我是天才4号



    我是逗逼1号
    我是逗逼1号
    我是逗逼1号
    我是逗逼1号



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


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

1.4 表格标签

考试信息登记表

    
    
        姓名
        年龄
        性别
        成绩
    
    
        小二
        17
        男
        99
    
    
        小三
        19
        女
        86
    

        小四
        17
        男
        100
    

        小五
        20
        男
        59
    


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

姓名	年龄	性别	成绩
小二	17	男	99
小三	19	女	86
小四	17	男	100
小五	20	男	59

1.5 表单标签



    用户名：

    密码：


      

    

    男   
    女    

    

    篮球
    足球
    排球
    乒乓球

实战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：世纪佳缘注册页面

先来看一下效果图

* 用到的图片如下

* 代码如下

用户名：
密码：
性别：	男女
爱好：	篮球足球排球玩毛线
城市：
个人宣言：

2.css的使用

2.1 盒子模型

2.2 css的三种选择器

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

代码如下


    
    
    


    这是第一块DIV区域
    这是第二块DIV区域

    这是第一块span区域
    这是第二块span区域

    我是个天才

2.3 流式布局


    
        
        
        
    
    
        div1中的内容
        div2中的内容
        div3中的内容

点击复制链接与好友分享!回本站首页