Learning Day 12@div css_html/css_WEB-ITnose

Issue:

Data annotations

By the way, you can build your own validation properties (we'll talk about that later), but [Required] is System.ComponentModel .DataAnnotations One of many standard validation properties present in the assembly. Figure 3 shows the complete list of validation properties in the annotated assembly.

Figure 3 Validation attributes in annotation assembly

属性	说明
StringLength	指定数据字段中允许的字符串最大长度。
Required	指定数据字段值是必需的。
RegularExpression	指定数据字段值必须与指定的正则表达式匹配。
Range	指定数据字段值的数值范围限制。
DataType	指定与某个数据字段关联的附加类型的名称（一个 DataType 枚举值，如 EmailAddress、Url 或 Password）。

Attribute

Description td>

StringLength

Specifies the maximum length of a string allowed in the data field.

Required

The specified data field value is required.

RegularExpression

The specified data field value must match the specified regular expression.

Range

Specify the numerical range limit of the data field value.

DataType

Specifies the name of an additional type associated with a data field (a DataType enumeration value, such as EmailAddress, Url or Password).

这些数据注释属性已迅速在 Microsoft .NET Framework 中普遍存在。您不仅可以在 ASP.NET MVC 应用程序中使用这些属性，而且 ASP.NET 动态数据、Silverlight 和 Silverlight RIA 服务也理解它们。

问题：

Css li是使用css来控制li的样式-css列表，如li列表的以点为开头，或图片开头的列表形式。

Li的基础知识
Li是html的基本元素标签。

标签是用于定义列表项目。

标签可用在有序列表 (

) 和无序列表 (
) 中。
在W3C标准下li不能单独使用，需要与
或
配合使用，使用范例：



1. div+css范例


2. div+css范例之li




• div+css范例


• div+css范例之li



以上代码效果如下图：

Css li实例,li，ol li，ul li的用法

经过实例演示知道了li的默认有序和无序的css样式，有序ol的样式是以阿拉伯数字1、2、3为递增列表，而无序的ul的CSS样式是以一个圆黑点的列表形式。

问题：

简单讲CSS父级 CSS子级是相对而言，如一个DIV“A”被另外一个DIV “B”包裹着，这样我们就可以让我B是A父级，同样一个道理

举例说明： -  TOP
DIV CSS 父级子级说明例子：
CSS代码
.yangshi{...}
.yangshi .yangshi_a{ ...}
.yangshi .yangshi_b{ ...}

Div代码




内容a


内容b



以上div+css代码这里我们就可以认为 yangshi_a父级（上一级）是yangshi。
这样我们就可以利用CSS指针属性在div css中,最终CSS样式可以有相同命名的属性选择器的，但是赋予不同的值。
这样我们通过.yangshi .yangshi_a一看即可知道yangshi_a的父级是yangshi

问题：

什么是CSS指针？这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...}
对于yangshi_a是yangshi 指向的样式

我们可以作1个实验来理解此CSS 指针 是什么
原CSS div样式
.yangshi{ width:300px; height:50px; border:1px solid #F00; margin:0 auto; text-align:right;}
.yangshi .yangshi_a{ float:left; width:30px; border:1px dashed #333;}
.yangshi .yangshi_b{ float:right; width:50px; border:1px dashed #333;}



内容a


内容b



Note: The parent should be defined outside, and the child definition should be written inside the parent.

Problem:

We often use !important css hack to distinguish the recognition of CSS attributes by browsers such as IE6 and IE7. And we need to know that using CSS important is a CSS demonstration with this word for IE7 priority recognition.

For example: color:#F00 !important; color:#00F These two have the same font color control. Generally speaking, the browser reads from left to right, and the IE browser will read these two The last color of the color is color: #00F to display the text color of the web page, but in IE7, the color of color: #F00 !important; will be displayed. This is because IE7's unique recognition supports important and the priority introduces the important setting CSS of the same CSS attribute. Style attributes.

We often use this important to distinguish the css hacks of IE7 from other browsers.

Question:

Display:block is what we commonly use, and block is also the default value of Display.
Explanation: The subsequent content of this object wraps automatically.
css display block example
CSS code:
.divcss5{display:block}

Html corresponding application code:
My back The text will wrap I was wrapped by the previous divcss5 corresponding CSS attribute.
will not be wrapped because I have not set display:block

Corresponding result screenshot:

Explanation that span is used as an example here, and one is set CSS style, if it is not set, can be compared to the object whose DIV display:block style is set. The subsequent content is wrapped.

The none value of this display is often used by us to hide object content. The hidden object will not occupy its own inherent width and height space.
For details, see CSS hidden explanation: http://www.divcss5.com/jiqiao/j55.html

Display:inline, we often use it in li. The function is to line up li in a row (called: delete rows).
Next we will demonstrate the comparison between an unset li list and a set css Display inline style.

Css code
ul.divcss5 li{display:inline}
Explanation: ul.divcss5 corresponds to li css style attribute is display:inline

Html corresponding code:




• My parent ul does not have divcss5 style


• I am alone


• I am alone< /li>
  


• My parent ul has divcss5 style

< ;li>I stand in a row

• I stand in a row under dicss5



Question:

Pictures with borders

According to the above picture, we added a link to the picture, and as a result, the picture had a border,

Solution:

We only need to initialize IMG tag CSS can be

img{ padding:0; border:0;} Add this CSS to eliminate the border

The picture exceeds the size of the DIV
We often encounter the problem due to a The image is too wide and exceeds the width we set.
Solution
Use CSS control to change the width of the object IMG tag. If the object is .yangshi and set the width to 500px, then we only need to set .yangshi img{max-width:500px;}. But in IE6 max-width is invalid, so our best solution is to set the width when uploading the image, so that the width of the image itself is smaller than the width set in the place. This feels very troublesome, but many large websites solve it this way. , firstly, it can avoid breaking the set width, and secondly, it can reduce the image size so that the browser can open the webpage faster.

Summary:
1. There are inevitably pictures in a web page. At this time, we need to initialize the img tag: img{ padding:0; border:0;}
2. Avoid pictures that are too wide. To break the web page, we recommend cutting the image to be smaller than the set width when uploading the image. At the same time, you can also add the overflow:hidden attribute to the object, that is, hiding the excess content including the image.

Demonstration result picture:

Description: Set the css to the li object of display:inline, the li objects are arranged in a row, and the unset li list object still inherits the original CSS of its own line. style.

Problem:

The span inside the div does not need to be named css selector pseudo-class, the example is as follows
If the class of the div is yangshi, then set the css attribute for the span inside, the code is as follows
.yanshi span{attributes and attribute values}
Illustration example demonstration effect - TOP


Analysis of the above picture: It can be concluded that span does not need to name pseudo-class names and directly uses css to inherit attributes To set css styles on span. Here, the style within the div originally set the text in blue, but through inheritance, the style of the span was set to red.

Question:

Why should CSS properties be abbreviated?
1. Simplify the code. Some CSS property abbreviations can reduce CSS code, thereby reducing the bytes occupied by CSS files, speeding up web page download speeds and web page loading and opening speeds.
2. Optimize CSS purpose. One of the CSS optimizations is to simplify the code abbreviation CSS property code.

常见DIV+CSS缩写属性：
1、CSS 文本：font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:22px;即可简写缩写为font:12px/22px bold Arial, Helvetica, sans-serif;
2、CSS 背景：background-color:#F00;background-image:url(图片地址);background-position:bottom;background-repeat:no-repeat; 即可将背景CSS属性缩写为：background:#F00 url(图片地址) no-repeat left bottom;www.divcss5.com缩写介绍。
3、CSS 内补距（CSS padding）:padding-top:5px; padding-bottom:10px; padding-left:15px; padding-right:20px; 即可缩写为padding:5px 20px 10px 15px; 或padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;缩写为padding:5px 10px;
4、CSS 外边距（CSS margin）:margin-top:5px; margin-bottom:10px; margin-left:15px; margin-right:20px; 即可缩写为margin:5px 20px 10px 15px; 或margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;缩写为margin:5px 10px;
5、CSS 边框：border-left:1px solid #000;border-right:1px solid #000;border-top:1px solid #000;border-bottom:1px solid #000;即可缩写为：border:1px solid #000;

问题：

布局知识：
DIV+CSS布局，CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。
div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。

制作div+css网页前思考布局：
首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。

首先我们可以分析出我们DIV CSS布局重构此页面结构框架，我们可以看出是 上、中、下结构，其中又包括了左右结构。

由此我们就要写此页面CSS和html时候就先从上到下 从外到内原则写css与html。

问题：

使用不同的方法来引用css样式表，最终到达的效果相同，但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。

html引用css方法如下
1、直接在div中使用css样式制作div+css网页
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推荐此方法

接下来我们将逐个讲解html引用css方法的例子

1、直接在html标签元素内嵌入css样式，如

我是div css测试内容-www.divcss5.com支持
The effect is as shown below

2. Insert the style statement in the head part of the html header as follows:


3. Use @import to reference external CSS files

Use link to call external css file
Place to call the external wcss.css file to implement the html reference css file

This method does not require the style tag, but Directly refer to external styles by linking a style
It is generally recommended to use link to refer to external css style methods.

Question:

CSS can achieve effects and features

(1) It can be used on almost all browsers.
(2) Some functions that had to be implemented through image conversion in the past can now be easily implemented using CSS, thereby downloading the page faster.
(3) Make the fonts on the page more beautiful and easier to arrange, making the page truly pleasing to the eye.
(4) You can easily control the layout of the page.
(5) You can update the styles and formats of many web pages at the same time, instead of updating them page by page. You can use a CSS file to control the style of all web pages on the site. As long as the corresponding lines in the CSS file are modified, all pages of the entire site will change accordingly. Think about it, how did we control the color and size of fonts and the fonts used before using CSS? We generally use HTML tags to achieve this, and the code is very cumbersome. It is hard to imagine that if the font color and size need to be changed frequently on a page, the length of the HTML code generated must be bloated. To be honest, CSS was born to simplify such work, but of course its function is by no means that simple. Combining DIV CSS is to control the style attributes of the entire page through the idea of ​​style control of the page structure. The browser renders CSS properties through CSS class interpretation to express the style set in the style.

Question:

The standardized use of DIV CSS naming rules in web page production can improve the optimization effect, especially during teamwork, which can provide collaborative production efficiency. The specific DIV CSS naming rules and CSS naming rules are as follows:
Head of page: header Such as: #header {Attribute: attribute value;} or .header{Attribute: attribute value;}, maybe you need to know the difference and usage between class and id
Login bar: loginBar Login: logo Sidebar: sideBar
Advertisement: banner Navigation: nav Sub-navigation: subNav
Menu: menu Sub-menu: subMenu Search: search
Scroll: scroll Page body: main Content: content
Tab: tab            Article list: list        Prompt message: msg
小Tips: tips Column title: title Join: joinus
Guide: guild Service: service Hotspot: hot
News: news Download: download Registration: regsiter
Status: status Button: btn Vote: vote
Cooperation Partner: partner Friendly link: friendLink Footer: footer
Copyright: copyRight
Commonly used tags div, h1, h2, h3, h4, span, em, b, strong, font, u
1.CSS Name of ID
Coat: wrap Main navigation: mainNav Sub-navigation: subnav
Footer: footer Whole page: content Header: header
Copyright: copyRight Trademark: label Title: title
Main Navigation ：mainNav(globalNav) Top navigation: topnav
Side navigation: sidebar Left navigation: leftsideBar Right navigation: rightsideBar
Flag: logo Slogan: banner Menu content 1: menu1Content
Menu capacity: menuContainer Submenu: submenu
Side navigation icon: sidebarIcon Notes: note
BreadCrumb (i.e. navigation prompt of the page location)
Container: container Content: content Search: search
Login: login Ribbon: shop( Such as shopping cart, checkout)
current: current

DIV CSS naming summary: whether you use "." (lowercase period) to select the symbol to start naming, or use "#" (pound sign) to select the symbol It doesn’t matter how you name it at the beginning, but we’d better follow the rule that the main, important, special, and outermost boxes should be named with the “#” (pound sign) selection symbol, and the others should be named with “.” (lowercase period) selection symbol. Begin naming, and consider reusing calls to named CSS selectors in HTML.

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

DIVCSS5建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

2.CSS样式文件命名如下

主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

问题：

比较好的开源免费网站系统源码如下：
CMS网站管理系统：
PHP：DEDECMS 、PHPCMS、帝国、PHP168、HBcms宏博
ASP：动易
ASPX：动易SiteFactory
博客：
ASP：Z-Blog、
PHP：wordpress、bo-blog

论坛：
PHP：Discuz、
ASP：动论ASP、
ASP.NET：动论.NET、

问题：

浏览器读取css原理

浏览器呈现一个网页到用户眼前（html纯静态网页）时，首先浏览器是先加载html页面，如果网页是div+css开发的，浏览器将读取加载引入到html页面css样式文件代码，然后通过浏览器解释翻译将css文件里代码样式赋予到html中设置各个不同伪类标签，最终将网页和css样式中各式各样的样式完美的呈现给浏览者。

从css引入html到html调用css样式实例，浏览器将yangshi伪类中的属性字体大小为16px赋予

www.divcss5.com案例测试
内，这样“www.divcss5.com案例测试”内容的文字大小将为16像素。

问题：

Div css 页面中的ID是怎么个用法呢？
通常我们在CSS样式定义的时候 以“#”来开头命名id名称如：#css5{属性:属性值;} 这个也有点像class的定义，只是class是以小写句号“.”开头命名，而ID是以“#”好开头定义。那id是怎么个用法呢？ Css里的ID用法与class用法一样，只是把class换成id。如例子：在CSS样式定义ID --- #css5{height:25px;width: 200px;} ,调用ID ---

我是ID例子
。

问题：

@Html.Raw();

有什么作用？

If you are working with ASP.NET MVC 3 and the new Razor View Engine, you probably stumbled upon the fact that with Razor everyting is HTML encoded and the concept of Html Encoding Nuggets don't exist in Razor. This is actually a good thing as there is a lot of confusion about when and when not to use those nuggets in the WebForms View Engine. For security reasons you really always want everything HTML encoded and want to make it an extra explict effort to not HTML encode something.

Therefore with the Razor View Engine when you pass a string to the response stream that includes HTML tags, the tags will be HTML encoded and show up in the browser as such:

As discussed in the previous HtmlString and IHtmlString tutorial, you can get around this HTML encoding by wrapping the string with the class HtmlString. You can go ahead and manually construct your own HtmlString or use a built in HtmlHelper in ASP.NET MVC 3, called Html.Raw, that does the exact same thing.

In this case the HTML tags won't be encoded, but instead become part of the HTML in the source of the page.

In conclusion, now that everything associated with the Razor View Engine in ASP.NET MVC 3 and ASP.NET Web Pages is HTML encoded when sent to the browser, you need to use HtmlString or another implementation of IHtmlString that allows you to skip HTML encoding when appropriate. In most cases, you will find HTML Helpers, like Html.Raw, that use HtmlString behind the scenes for you.

问题：

测试js的时候可以这样写?

问题：

FormCollection传值

当点击提交按钮后，想在Controll里取到Form里的数据。

必须在控件上设置name属性 例如

，

在controll的Action里接收如下

        public ActionResult Login(FormCollection form)
        {

             string userid=form["userID"];

             return view();

        }

如果不设置input的name属性，发现action里form总是为空！

问题;

ViewBag只能使用一次！

因此，需要经常地把需要的值传给相应的View。

问题：

里面的this.value是什么意思？

this.value代表这个select标签的value值

可以作如下测试：

一切就都清楚了！

问题：

MVC下如何实现下拉列表级联？

1. 如何获得数据？

可以通过ViewBag把数据传送到View中，此外，还要通过ajax的API进行传送

2. 如何实现级联？

使用Ajax技术，可以实现局部刷新，对于级联的实现只需要写一个onchange的触发函数，并且把二级下拉列表的html实现用ajax来动态加载

具体如下：

（1） 新建两个控件

然后往上加东西：

>

事实上javascript: 可以省略，直接按js普通的书写形式就可。

以上加了一个触发函数，当一级下拉列表发生变化时，自动刷新二级下拉列表。

再加上一些动态的东西：

@foreach (DeliveryType type in ViewBag.delivertyTypes)

{

@type.Name

}