HTML+CSS页面练习——legend第九部分
第九部分——Contact And Footer
简要介绍:
本部分包括两个板块。一个用<form>元素实现的联系页面,另一个是页脚。
页面效果:
Contact:
Footer:
HTML代码:
Contact部分的代码:
<section id="contact"><div class="container"><div class="align"><i class="icon-mail-2"></i></div><h1>Contact us now!</h1><div class="row"><div id="theme-form"><form action="#" method="post" class="cform-form"><div class="row"><div class="span6"><span class="your-name"><input type="text" name="your-name" placeholder="Your Name" class="cform-text" size="40" title="your name"/></span></div><div class="span6"><span class="your-email"><input type="text" name="your-email" placeholder="Your Email" class="cform-text" size="40" title="your email"/></span></div></div><div class="row"><div class="span6"><span class="company"><input type="text" name="company" placeholder="Your Company" class="cform-text" size="40" title="company"/></span></div><div class="span6"><span class="website"><input type="text" name="website" placeholder="Your Website" class="cform-text" size="40" title="website"/></span></div></div><div class="row"><div class="span12"><span class="message"><textarea name="message" class="cform-textarea" cols="40" rows="10" title="drop us a line."></textarea></span></div></div><div><input type="submit" value="Send message" class="cform-submit pull-left"></div></form></div></div></div></section>
Footer部分的代码:
<div id="footer-wrapper"><div class="container"><footer><small>© 2013 Inbetwin Network. All rights reserved.</small> <!--<small> 标签定义小型文本(和旁注)--></footer></div></div>
CSS代码:
Team and Contact的CSS代码:
#team,#contact{color: #e4e5e2;background: #312a1e;padding:4.75em 85px 0px;}#team .align,#contact .align{font-size:6em;text-align: center;}#team h1,#contact h1{font-size: 3em;margin: 0.5em 0 1em;text-align: center;font-family: 'Patua One',cursive;}
Contact部分的CSS代码:
#theme-form{padding-bottom: 10px;position: relative;z-index: 999;}#theme-form .row{margin: 25px 0px;width: 100%;text-align: center;}#theme-form .span6{display: inline-block;width: 49.5%;}#theme-form .your-name,#theme-form .company{float: left;width: 95%;}#theme-form .your-email,#theme-form .website{float: right;width: 95%;}#theme-form input[type=text],#theme-form textarea{background: rgba(227,231,228,1);font-size: 'Open Sans',sans serif;border:0;text-align: left;vertical-align: middle;border-radius: 4px;word-spacing: 8px; /*词间距*/padding: 8px;}#theme-form input[type=text]:focus,#theme-form textarea:focus{background: rgba(101,106,100,1);color: #eff1ef;box-shadow: none;transition: background 0.25 ease-in;}#theme-form input[type=text]{height: 3.25em;width: 100%;}#theme-form textarea{padding-top: 1em;width: 100%;height: 200px;} #theme-form input[type=submit]{font-family: 'Patua One',cursive;color:#fff;width: 185px;height: 60px;font-size: 1.3125em;letter-spacing: 0.05em;margin: 0 0 20px 0;display: block;background: #f0bf00 ;border-radius: 3px;border: none;}#theme-form input[type=submit]:hover{background: #43413e !important;}
Footer 部分的CSS代码:
#footer-wrapper{margin: 40px 0 10px 0;text-align: center;}#footer-wrapper footer{color: #1a1a1a;font-weight: bold;}
总结:
在Contact页面中,开始想通过margin和padding两个属性值来定义4个<input type="text">标签的样式,实现的时候发现很困难。
最后,通过float属性来实现的。将左边两个的float属性设置为float,将右面两个的float属性设置为right。
转载于:https://www.cnblogs.com/209yin/p/7607267.html
HTML+CSS页面练习——legend第九部分相关推荐
- HTML+CSS页面练习——legend第七部分
第七部分--news 简要介绍: 本部分利用<article>标签实现了一种卡片式效果. 页面效果: HTML代码: <section id="news"> ...
- HTML+CSS页面练习——legend第五部分
第五部分--Service 简要介绍: 页面效果: HTML代码: <section id="services"><div class="contain ...
- css屏幕大小的容器,位置2箭头固定到CSS页面容器的外部 - 屏幕大小
我想创建一个HTML页面滑块,所以我有我的容器div,然后坐在外面,在左边我有一个Previous图标和右侧我有一个下一个图标.位置2箭头固定到CSS页面容器的外部 - 屏幕大小 我的问题是,当我将窗 ...
- div css 登录页面布局,DIV+CSS页面布局
页面布局设计 一.三行模式或三列模式 特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分 三列模式:将页面分成左.中.右三个部分 在CSS文件里: 1.三行模式代码 ...
- 网页显示不全的原因css,css 页面显示不全怎么办
css页面显示不全的解决办法:1.取消css中对象的高度css样式:2.减少内容:3.在设置高度和宽度的同时再设置"overflow:hidden"属性样式. 本教程操作环境:wi ...
- html 网页 简体中文 繁体中文 英文自适应,css页面字体替换源代码和页面显示不一样问题解决...
2018年8月27日19:58:12 css指定字体的时候,可以自制的字体,比如字符替换,比如 0没有被替换,其他在源代码被替换对应的字母,但是现实的时候在替换成正确的数字 很简单,防爬虫,但是... ...
- 符合SEO标准的div+css页面参考
下面的部分是著名设计师阿捷发表的div+css三行两列网页参考,星箭在此基础上做了小小的改动,以前乐思蜀也对阿捷的这个经典布局案例进行过修改,将左右代码互换,达到主体内容显示在前更方便搜索引擎抓取分析 ...
- 常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式 公共的样式部分 <style>* ...
- php项目css加载失败,CSS页面加载失败的原因有哪些
CSS加载失败的常见原因有:路径错误.浏览器不兼容.网络原因.编码格式不同等错误 才刚刚入门CSS,经常会碰到CSS加载失败的问题,网页上什么样式都没有,今天将要和大家分享的是常见的CSS加载失败的原 ...
最新文章
- JetBrain常用快捷键+省略输入方式
- xcode6是否导入framework
- 2019蓝桥杯省赛---java---C---1(求和)
- python的序列类型包括哪三类,Python常用的序列类型包括列表、元组和字典三种。...
- C/C++排序算法(5)归并排序
- java 反射机制及其应用
- Linux换行符与windows换行符
- java io 创建临时文件,用Java创建一个指定的临时文件
- 动态规划—代码查重实验
- 谷歌浏览器如何安装crx插件
- 计算机中if函数的使用方法,excelif函数多层嵌套的使用方法
- 机器学习和深度学习的区别
- 除了摆地摊or送外卖,程序猿如何体面的赚零花钱?
- 【自用向】【新手向】PHP入门学习(不断更新)
- 微型计算机只要性能指标,微型计算机的主要性能指标运算速度.ppt
- Buildroot 制作根文件系统
- 窗口无故失去焦点解决方案
- drf 获取域名+端口_如何注册域名(+简单提示可免费获取)
- ERP系统31.83版本发布,解决企业供应链管理难题
- 写在上半年的文章——道法自然,上善若水
热门文章
- 设计模式总结(Java)—— 单例模式
- Java多线程基础篇(02)-多线程的实现
- JavaScript权威设计--JavaScript表达式与运算符(简要学习笔记五)
- 【汉化】DevExpress插件中RichEdit控件的自定义汉化方法
- mysql_connect和mysql_pconnect区别
- python炒股日记_自学python的日记分享
- java 多线程取一条记录_java多线程从队列中取出数据执行
- 电热耦合_作者特稿︱电网运行环境下基于电热耦合潮流的架空线路应力预估
- Vue学习之监视属性watch
- 第三篇:稳定性之借风险之力驱动架构演进