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

HTML和CSS

时间:2019-08-17 21:38:18      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:三种方式   ref   公司   速度   padding   成都   dde   select   方式   

 

THML

概念:超文本标记

作用:页面内容

<h><p><img><a>

表格格式:

<table>

<tr>

<td>

</tr>

</table>

内有bordercolspan,rowspan连接列和行

表单form

<form action=”文件内容存储” method=”get或者post请求”>

<input type=”” name=”” value=””>

<form>

需要设置name值,这样数据才能传回后台不需要value

文本text

密码password

需要name也需要value的值才能把数据传入后台

单选radios

复选checkbox

需要value的值

文件file

隐藏hidden

重置reset

提交submit

下拉菜单

<select><option value=”属性值”>显示值</option></select>

<img src=”文件位置” alt=””>

<a href=”网站地址”>内容</a>

Textarea文本域中是由rowscols两个属性

 

CSS

概念:层叠样式表

作用:修饰thml

三种方式:

内联:

行内联

类选择器

id选择器

外联:

<link rel=”stylesheet href=”css路劲””

做一个表单

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .c1{
      text-align: right;
    }
    #d1{
        align:center;
    }
</style>
</head>
<body>
<form>
    <table id="d1" border="1" cellspacing="0" cellpadding="0" style="width: 800px;height: 200px;" >
        <tr>
            <td colspan="3" style="font-size: 20px;font-size: b;"> 1.会员登陆名和密码</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 用户名:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"><input type="submit" value="检测用户姓名">请使用数字和英文字母</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 密码:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">密码为15个数子或者字母</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 确认密码:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">再次确认</td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 20px;font-size: b;"> 2.姓名和联系方式</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 真是姓名:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"><input type="radio" name="sex" name="nan"><input type="radio" name="sex" name="nv"></td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 电子邮箱:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"><b><span style="color: red">非常重要!</span></b></br>这是客户首选的方式</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 固定电话:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">区号+电话号码</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 公司所在地:</td>
            <td colspan="2" style="width: 90%">
                <select style="width: 100px">
                    <option value="compeny">北京
                    <option value="compeny">上海
                    <option value="compeny">成都
                </select>
                <select style="width: 50px">
                    <option value="local">东城
                    <option value="local">西城
                    <option value="local">北城
                </select>
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 街道地址:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;width: 300px"><span style="color: red">*</span>
            填写县(区)、街道
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 传真号:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 手机号:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 传真号:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 邮政号:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"></td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 20px;font-size: b;">3.公司主营业务</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 公司名称:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">填写注册号,公司全称<br>无商号的个体填写营业执照号如:张三</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 你的职位:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"></td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 主营行业:</td>
            <td style="width: 30%">
            <select>
                <option value="work">电子电工
                <option value="work">装修
                <option value="work">祭祀
            </select>
            </td>
            <td style="width: 60%">请选择正确</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 主营产品/服务:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;width: 300px">
            <span style="color: red">*</span>
            3个主要的产品,至少需要填写一个
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 公司网站:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;width: 300px;" placeholder="http://">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> </td>
            <td colspan="2" style="width: 30%">
            <input type="submit" style="width: 200px;height: 60px;border-radius: 10px;background: green;" >
            </td>
        </tr>
    </table>
</form>
</body>
</html>
View Code

 

BSCS

Bs浏览器服务器模式:不用客户跟新,不安全,只要右浏览器就可以访问,

 

Cs客户服务器模式;需要下载APP,安全,服务器速度块,需要跟新软件,

HTML和CSS

标签:三种方式   ref   公司   速度   padding   成都   dde   select   方式   

原文地址:https://www.cnblogs.com/xiaoruirui/p/11370273.html

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