简历、表格、表单、css样式、span、div、选择器

el/2024/5/23 1:57:23

007 简历的制作

 代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" cellspacing="0"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><col width="400px"><tr align="center" heigh="300px"><td colspan="7">个人简历</td></tr>	<tr align="center" heigh="300px"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr>	<tr align="center" heigh="300px"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr>	<tr align="center" heigh="300px"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr>	<tr align="center" heigh="300px"><td>毕业院校</td><td colspan="5"></td></tr>	<tr align="center" heigh="300px"><td>求职意向</td><td colspan="6"></td></tr>	</table></body>
</html>

疑问:tr中的 heigh 好像没明显作用

效果图:

 关于colgroup标签

 关于tbody标签:一般浏览器会自动生成

关于注释

<!--   -->

关于标签嵌套

表单:

<input>标签:输入 

  • type属性值:
  • text:文本输入框
  • password:密码
  • button: 按钮
  • radio:单选
  • checkbox:复选框

 get请求和post请求的区别

从功能上分:

  • post :提交数据
  • get:获取数据 

css(cascading style sheet)层叠样式表

<tr height="60px"><td colspan="2" align="center"><input type="submit" value="提交" style="width: 80px;height: 60px;background-color:darkseagreen ;"><input type="reset" value="重置" style="width: 80px;height: 60px;background-color:darkseagreen ;"></td>
</tr>

效果图:

012:引入span

<p style="text-align: center;background-color: ghostwhite;">从我的全世界路过</p>

效果图:    这个块都是backcolor

<p style="text-align: center;"><span style="background-color: gray;color: white;font-size: 24px;">从你的全世界路过</span>
</p>

效果图:

div:

 

 如何居中:

text-align:centermargin:auto; 让容器本身水平居中margin 表示边距 ,auto表示自动

总结:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="color: #555;margin: auto;width:600px"><p style="text-align: center;"><span style="background-color: gray;color: white;font-size: 40px;">从你的全世界路过</span></p><p>一个人的记忆就是座城市,时间腐蚀着一切建筑</p><p><span style="color: blueviolet;">如果你不往前走,就会被沙子掩埋。</span><b>所以我们泪流满面,步步回头,可是只能往前走。</b></p><p><span style="color:greenyellow ;">哪怕往前走,是和你擦肩而过。</span><b>我从你们的世界路过,可你们也只是从对方的世界路过。</b>哪怕寂寞无声,我们也依旧是废话流,说完一切,和沉默做老朋友。</p></div></body>
</html>

 效果展示:

 013 布局与选择器

div容器的特点:一个空div,默认宽度100%,高度为0

字体默认16px 行高:21px

<!DOCTYPE html>
<html style="background-color:gainsboro;"><head><meta charset="UTF-8"><title></title></head><body style="margin: 0;"><div id="banner"><img src="img/002.png" style="width: 100% ;"></div><div id="navigation" style="height: 80px;line-height:80px ;text-align: center;background-color: white;"><a href="#" style="text-decoration: none;color:black;margin:0 15px;">首页</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">菜谱</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">食材</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">健康</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">社区</a><a href="#" style="text-decoration: none;color:black;margin:0 15px;">关于我们</a>	</div><div id="bottom" style="height: 40px;line-height:40px;text-align: center;font-size: 14px;color:grey;">版权所有:西安财经大学信息学院软件1601班 李婷</div></body>
</html>

效果图:

CSS样式: 

 

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}html{background-color:gainsboro;}#navigation{height: 80px;line-height:80px ;text-align: center;background-color: white;}#bottom{height: 40px;line-height:40px;text-align: center;font-size: 14px;color:grey;">}.nav{text-decoration: none;color:black;margin:0 15px;}#banner img{width: 100%;}</style></head><body style="margin: 0;"><div id="banner"><img src="img/002.png" ></div><div id="navigation" ><a href="#"class="nav" >首页</a><a href="#"class="nav" >菜谱</a><a href="#"class="nav" >>食材</a><a href="#"class="nav" >健康</a><a href="#"class="nav" >社区</a><a href="#"class="nav" >关于我们</a>	</div><div id="bottom">版权所有:西安财经大学信息学院软件1601班 李婷</div></body>
</html>

总结:

加入边框——>增加边框长度——>只留右边框

在网页中:行内样式表优先级>内部样式

<a href="#" class="item" style="border: none;">秒杀活动</a>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#navigation{text-align: center;}#navigation.last{border: none;}.item{text-decoration: none;color: black;border-right: solid 1px #808080;padding:0 15px ;}</style></head><body><div id="navigation"><a href="#" class="item">首页</a><a href="#" class="item">办公家居</a><a href="#" class="item">数码科技</a><a href="#" class="item">母婴</a><a href="#" class="item">团购</a><a href="#" class="item last">秒杀活动</a></div></body>
</html>

效果图:


http://www.ngui.cc/el/3419362.html

相关文章

选择器的权重、文本属性、图片格式、背景图、元素的浮动布局、盒子模型

015 选择器的权重 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style type"text/css">#p1{color:blue;}*{color:orange;}.pp{color: green;}p{colorred;}</style></head>&…

UI基本控件(一):UIScrollView

一、UIScrollView 1.contentOffset ->默认CGPointZero&#xff0c;用来设置scrollView的滚动偏移量。 // 设置scrollView的滚动偏移量 scrollView.contentOffset CGPointMake(0, 200); 2.contentSize- >默认CGSizeZero&#xff0c;用来设置scrollView的滚动范围。 // …

UI基本控件(二):UIButton

UIButton——按钮 作用&#xff1a;用户交互的主要控件&#xff0c;有六种类型&#xff0c;其中自定义类型使用最为普遍 属性&#xff1a; title属性&#xff1a;是按钮的文字 titleColor属性&#xff1a;是按钮的颜色 image属性&#xff1a;是按钮显示的图像 提示&#…

UI基本控件(三):UISlide、UISwitch、UIView

一、UISlide ——滑块控件 作用&#xff1a;允许用户使用手指拖动滑块&#xff0c;产生数值变化的控件 属性&#xff1a; minimumValue&#xff1a;滑块的最小数值 maximumValue&#xff1a;滑块的最大数值 value&#xff1a;滑块的当前数值 需要注意的时&#xff1a;滑块…

UI基本控件(四):UIImageView、UILabel、UIControl

一、UIImageView 图像视图 作用&#xff1a;在一个区域内&#xff0c;显示图像。 注意&#xff1a;UIImage是一个二进制的图像数据&#xff0c;而UIImageView是用来显示图像数据的区域 属性&#xff1a; image属性&#xff1a;用于设置在图像视图中显示的图片 要从bundle加…

ios基础篇(一)—— UIImagePickerController类

UIImagePickerController简述&#xff1a; UIImagePickerController 类是获取选择图片和视频的用户接口&#xff0c;我们可以用UIImagePickerController选择我们所需要的图片和视频。 注&#xff1a;UIImagePickerController不能够任意定制&#xff0c;也不可以继承生成子类。…

ios基础篇(二)—— UITableView

基本 API 解释以及用法 数据源 UITableViewDataSource代理 UITableViewDelegateUITableViewCell一些常用操作UITableView 进阶 性能优化优雅的使用 UITableView 之链式编程UITableView 相关的开源库 MJRefresh 上拉下拉刷新组件UITableViewFDTemplateLayoutCell 自动计算行高SW…

ios基础篇(六)—— 代理协议消息传递机制、 NSTimer计时器

代理协议机制在iOS开发中&#xff0c;是非常常用的一种消息传递机制&#xff0c;主要用于子视图向父视图传递数据&#xff0c;代理协议是单向消息传递。 要使用代理协议&#xff0c;需要以下几个步骤&#xff1a; 1.子视图控制器中需要做如下操作&#xff1a; 1.1在子视图控制…

ios基础篇(三)—— UITextField、UITextView

一、UITextField —— 文本框控件 作用&#xff1a;供用户输入或编辑文本 属性&#xff1a; text属性&#xff1a;获得或设置文本框中的文字 使用文本框控件时需要注意几项事情&#xff1a; 在输入不同类型的文本时&#xff0c;需要注意键盘的类型&#xff0c;譬如输入QQ号…

ios基础篇(五)—— UIDatePicker UIPickerView、UIPageControl、UIActivityIndicatorView

一、UIDatePicker && UIPickerView UIDatePicker&#xff08;日期选择器&#xff09;只有这四种模式&#xff1a; typedef NS_ENUM(NSInteger, UIDatePickerMode) {UIDatePickerModeTime, // Displays hour, minute, and optionally AM/PM designation …