第九部分——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>&copy; 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第九部分相关推荐

  1. HTML+CSS页面练习——legend第七部分

    第七部分--news 简要介绍: 本部分利用<article>标签实现了一种卡片式效果. 页面效果: HTML代码: <section id="news"> ...

  2. HTML+CSS页面练习——legend第五部分

    第五部分--Service 简要介绍: 页面效果: HTML代码: <section id="services"><div class="contain ...

  3. css屏幕大小的容器,位置2箭头固定到CSS页面容器的外部 - 屏幕大小

    我想创建一个HTML页面滑块,所以我有我的容器div,然后坐在外面,在左边我有一个Previous图标和右侧我有一个下一个图标.位置2箭头固定到CSS页面容器的外部 - 屏幕大小 我的问题是,当我将窗 ...

  4. div css 登录页面布局,DIV+CSS页面布局

    页面布局设计 一.三行模式或三列模式 特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分 三列模式:将页面分成左.中.右三个部分 在CSS文件里: 1.三行模式代码 ...

  5. 网页显示不全的原因css,css 页面显示不全怎么办

    css页面显示不全的解决办法:1.取消css中对象的高度css样式:2.减少内容:3.在设置高度和宽度的同时再设置"overflow:hidden"属性样式. 本教程操作环境:wi ...

  6. html 网页 简体中文 繁体中文 英文自适应,css页面字体替换源代码和页面显示不一样问题解决...

    2018年8月27日19:58:12 css指定字体的时候,可以自制的字体,比如字符替换,比如 0没有被替换,其他在源代码被替换对应的字母,但是现实的时候在替换成正确的数字 很简单,防爬虫,但是... ...

  7. 符合SEO标准的div+css页面参考

    下面的部分是著名设计师阿捷发表的div+css三行两列网页参考,星箭在此基础上做了小小的改动,以前乐思蜀也对阿捷的这个经典布局案例进行过修改,将左右代码互换,达到主体内容显示在前更方便搜索引擎抓取分析 ...

  8. 常见的CSS页面布局方式

    详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式 公共的样式部分 <style>* ...

  9. php项目css加载失败,CSS页面加载失败的原因有哪些

    CSS加载失败的常见原因有:路径错误.浏览器不兼容.网络原因.编码格式不同等错误 才刚刚入门CSS,经常会碰到CSS加载失败的问题,网页上什么样式都没有,今天将要和大家分享的是常见的CSS加载失败的原 ...

最新文章

  1. JetBrain常用快捷键+省略输入方式
  2. xcode6是否导入framework
  3. 2019蓝桥杯省赛---java---C---1(求和)
  4. python的序列类型包括哪三类,Python常用的序列类型包括列表、元组和字典三种。...
  5. C/C++排序算法(5)归并排序
  6. java 反射机制及其应用
  7. Linux换行符与windows换行符
  8. java io 创建临时文件,用Java创建一个指定的临时文件
  9. 动态规划—代码查重实验
  10. 谷歌浏览器如何安装crx插件
  11. 计算机中if函数的使用方法,excelif函数多层嵌套的使用方法
  12. 机器学习和深度学习的区别
  13. 除了摆地摊or送外卖,程序猿如何体面的赚零花钱?
  14. 【自用向】【新手向】PHP入门学习(不断更新)
  15. 微型计算机只要性能指标,微型计算机的主要性能指标运算速度.ppt
  16. Buildroot 制作根文件系统
  17. 窗口无故失去焦点解决方案
  18. drf 获取域名+端口_如何注册域名(+简单提示可免费获取)
  19. ERP系统31.83版本发布,解决企业供应链管理难题
  20. 写在上半年的文章——道法自然,上善若水

热门文章

  1. 设计模式总结(Java)—— 单例模式
  2. Java多线程基础篇(02)-多线程的实现
  3. JavaScript权威设计--JavaScript表达式与运算符(简要学习笔记五)
  4. 【汉化】DevExpress插件中RichEdit控件的自定义汉化方法
  5. mysql_connect和mysql_pconnect区别
  6. python炒股日记_自学python的日记分享
  7. java 多线程取一条记录_java多线程从队列中取出数据执行
  8. 电热耦合_作者特稿︱电网运行环境下基于电热耦合潮流的架空线路应力预估
  9. Vue学习之监视属性watch
  10. 第三篇:稳定性之借风险之力驱动架构演进