传智播客设计学院简介网页代码
项目任务
项目分析
1.该网页分为左右两大板块
2.左边为字图结合,可在图片处理工具中将图片设计好,再将该图片设为背景即可
3.左图中文字部分可用有序列表制作
4.左图制作好后,设置左浮动,在进行右边的文字简介编辑
5.右边文字可分为三个段落,分别编辑,并将"传智播客设计学院"字体加粗即可
下面我们来看代码
HTML 部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>传智博客设计学院首页</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head><body>
<div class="one">
<h1>传智播客设计学院简介</h1>
<p align="center">更新时间:2015年07月28日14时08分 来源:传智播客</p>
<hr/>
<div class="a">
<ul>
<div class="ud"></div>
<li>移动时代的主流设计师</li>
<li>集中于IT企业</li>
<li>门槛高 薪水很高</li>
<li>竞争少 要求全方面人才</li>
<li>所需技能:</li>
<div class="b"></div>
<li>平均月薪:6570</li>
</ul>
</div>
<div>
<p><span> 传智博客设计学院</span>注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，结合大量的案列和实战项目，毕业后相当于两年工作经验</p>
<p><span> 传智博客设计学院</span>传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，成为平面、网页、UI设计都精通的全能设计师。</p>
<p> 迄今为止<span>传智博客设计学院</span>已经培养出上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。
</p>
</div>
</div>
</body>
</html>
CSS部分代码
@charset "utf-8";
h1{text-align:center;}
.a{height:275px;width:615px;background-image:url(images/1.png);float:left;}/* CSS Document */
.one{height:400px;width:1030px;margin:50px;}
ul{color:red;font-size:9px;}
.b{height:100px;width:165px;}
.ud{height:60px;}
.div2{float:left;}
span{font-weight:bold}
最后效果图
总结
制作过程中,要灵活运用外内边距,冷静分析网页的元素构成,尽量减少代码长度,增强代码可读性
传智播客设计学院简介网页代码相关推荐
- 用HTML+CSS做简单的网页传智播客设计学院简介
传智播客设计学院简介 最终网页的效果图 下面是代码: 做这种网页有很多方法,我是主要用的div标签来将它划分为多个部分,进行div嵌套,从而实现上面的效果,具体看下面代码: <!DOCTYPE ...
- 传智播客设计学院简介代码
代码如下: <!DOCTYPE html> <html> <head><title>任务一 传智播客</title><meta cha ...
- 实验一：传智播客设计学院简介
传智播客设计学院简介,并点击图片进入传智播客首页 实现效果: 源代码: <!DOCTYPE html> <html lang="en"> <head& ...
- 传智播客设计学院简介
实验代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- 传智播客设计学院主页学习案例——HTML,CSS,JS代码学习案例
页面制作效果图 HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8" /&g ...
- 传智播客设计学院网页制作案例
做这个案例的方法有很多种,我这个只是上课做的,办法简单粗暴,仅供参考!!!!! 效果图 本人英文不是很好,标签命名就很随意,见笑了! html <div id="hear"& ...
- 成都传智播客就业班简介
成都JAVA培训,传智播客javaEE+3G就业班即将开班.名额仅剩5名,开班时间为:10月12日 想学好java又同时学好3G 的童鞋,报名从速呀. 软件学习方法非常重要,软件编程是一门科学技术,不 ...
- HTML简单网页——传智播客学院设计
<!DOCTYPE HTML> <!DOCTYPE html PUBLIC "" ""><HTML><HEAD> ...
- 源代码——传智播客页面
<!DOCTYPE html> <html> <head><title>传智播客</title><meta charset=" ...
最新文章
- 操作系统读写者问题实验报告_操作系统知识点总结
- ETOPS:双发飞机延伸航程运行
- sql int转换为varchar_常见SQL优化实践
- 一周最新示例代码回顾 (5/7–5/13)
- webpack 打包ts项目_使用webpack打包ts
- 白话Elasticsearch42-深入聚合数据分析之案例实战__bucket filter：统计牌品最近一个月的平均价格（Filter Aggregation）
- 使用DELPHI编写一个小的控件
- 麦格纳软件公司绩效考核信息化管理解决方案
- 腾讯技术直播间 | 零代码打造智能对话机器人
- 2299 Ultra-QuickSort（归并）
- TensorFlow 2.0 快速入门指南 | iBooker·ApacheCN
- 使用Python模拟蒙蒂霍尔悖论游戏
- 计算机由指定用户登陆
- java.util.BitSet 研究
- win7、win8手动安装AHCI驱动
- winrar.exe 命令行参数
- 结婚时贴红“囍”字的来历
- Java的MessageDigest类、MD5算法
- 计算机控制实验室装置,新型自控原理/计算机控制多功能实验装置
- 安霸平台gpio扩展芯片aw9523b调试