Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
#HTML

## Basic
 - **Block elements vs inline elements.** https://www.w3schools.com/html/html_blocks.asp
 - **Checkbox** https://www.tunnelsup.com/jquery-checkbox-checked-reading-and-setting/

## add favicon to website
```
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
```


## insert html code from another file
ref: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file

Solution 1. Use jQuery.js
```
<!doctype html>
<head>
<script src="script/jquery.js"></script> 
<script> $(function(){$("#nav_menu").load("nav_menu.html"); });</script> 
</head>


<body>
<div id="nav_menu"></div>
</div>
</body>
```

Solution 2. Use a custom javascript

a.html:
```
<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>
```
b.js:
```
document.write('\
    <h1>Add your HTML code here</h1>\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
');

```
Or just use the following handy bash script published as a Gist on Github, that automates all necessary work, converting b.html to b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

{{ ::html_to_js.zip |}}

Solution 3. Use htm file and ```frameset```


#CSS

##在html中使用external stylesheet:  
```<link rel="stylesheet" type="tex/css" href="LSstyle.css">```

##不同的vhost共用stylesheet的方法:在每个vhost里面建立symbolic link
```ln -s /home/wwwroot/LSstyle.css LSstyle.css``` 

### Class vs ID：

1. define an **id**  
例如定义一个圆角id  
```#fixWidthBlockRound { border-radius: 4px; }```

2. deine a **class**  
例如定义img tag的一个圆角class  
```img.roundedCorner6px{ border-radius:6px; overflow:hidden; }```

class可以用于各种元素，但id只针对一个元素：[[https://www.htmldog.com/guides/css/intermediate/classid/]]  

++++ Code Example|

```
#navlist {
  position: relative;
}

li.home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

li.home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

<ul id="navlist">
  <li class="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
</ul>
```
++++


<wrap lo>参考资料：  
 * CSS dropdown menu https://catalin.red/css3-dropdown-menu/
</wrap>
Wiki

User Tools

Site Tools

Page Tools
